type 個性 jpg htm cal 前端 height 容易 引用

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

<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
});
 

詳細參數

前端與移動開發項目三