Animation review parallax scrolling plug-in
Parallax Scrolling (Parallax Scrolling) refers to the web page display technology that multi-level elements move in different degrees in the process of web page scrolling, forming a three-dimensional motion effect visually
The main core is that the foreground and background move at different speeds to create 3D effects. This kind of effect can give the website a very good supplement.
Characteristic
The parallax scrolling effect is cool and suitable for the occasion of personality display.
The parallax roll slowly unfolds, which is suitable for the occasion of telling stories.
Parallax rolling is easy to get lost, so it needs strong navigation function.
principle
In traditional web pages, text, picture and background are all scrolling at the same speed in the same direction, while parallax scrolling is realized when scrolling, content and multi-level background are moving at different speeds or in different directions.
Sometimes you can also add some transparency, size animation to optimize the display.
Using the background attachment attribute.
background-attachment: fixed || scroll || local
What is Stellar.js?
stellar.js is a jQuery plug-in, which can easily add parallax scrolling effect to the website. Although maintenance has stopped, it is very stable, compatible with the latest version of jQuery, and many developers are using it. This plug-in is very popular in the jQuery plug-in library.
http://markdalgleish.com/projects/stellar.js/ Official website
Reference js package

<script src="path/to/jquery/jquery.min.js"></script>
<script src="path/to/jquery.stellar.min.js"></script>

Quote html

<div class="content" id="content1">
    <p>TEXT HERE</p>
</div>
<div class="content" id="content2">
    <p>TEXT HERE</p>
</div>
<div class="content" id="content3" data-stellar-background-ratio="0.5">
    <p>TEXT HERE</p>
</div>
<div class="content" id="content4" data-stellar-background-ratio="0.5">
    <p>TEXT HERE</p>
</div>
<div class="content" id="content5" data-stellar-background-ratio="0.5">
    <p>TEXT HERE</p>
</div>
<div class="content" id="content6" data-stellar-background-ratio="0.5">
    <p>TEXT HERE</p>
</div>

Introduce CSS

xxxxxxxxxx body {    font-size: 20px;    color: white;    text-shadow: 0 1px 0 black, 0 0 5px black;}p {    padding: 0 0.5em;    margin: 0;}.content {    background-attachment: fixed;    height: 400px;}#content1 {    background-image: url("xxx.jpg");}#content2 {    background-image: url("xxx.jpg");}#content3 {    background-image: url("xxx.jpg");}#content4 {   background-image: url("xxx.jpg");}#content5 {   background-image: url("xxx.jpg");");}#content6 {    background-image: url("xxx.jpg");}

js Calling function

$.stellar({
    horizontalScrolling: false,
    responsive: true
});

Detailed parameters