動畫複習視差滾動外掛
視差滾動（Parallax Scrolling）指網頁滾動過程中，多層次的元素進行不同程度的移動，視覺上形成立體運動效果的網頁展示技術
主要核心就是前景和背景以不同的速度移動，從而創造出3D效果。 這種效果可以給網站一個很好的補充。
特性
視差滾動效果酷炫，適合於個性展示的場合。
視差滾動徐徐展開，適合於娓娓道來，講故事的場合。
視差滾動容易迷航，需要具備較強的導航功能。
原理
傳統的網頁的文字、圖片、背景都是一起按照相同方向相同速度滾動的，而視差滾動則是在滾動的時候，內容和多層次的背景實現或不同速度，或不同方向的運動。
有的時候也可以加上一些透明度、大小的動畫來優化顯示。
利用background-attachment屬性實現。
background-attachment: fixed || scroll || local
Stellar.js是什麼？
stellar.js 是一個 jQuery外掛，能很容易地給網站新增視差滾動效果。 儘管已經停止了維護，但它非常穩定，與最新版本的jQuery相容，很多開發者也在使用它。 這個外掛在jQuery外掛庫裡很流行。

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

引用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>

引入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呼叫函式

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

詳細引數