視差滾動外掛

視差滾動（Parallax Scrolling）指網頁滾動過程中，多層次的元素進行不同程度的移動，視覺上形成立體運動效果的網頁展示技術

主要核心就是前景和背景以不同的速度移動，從而創造出3D效果。 這種效果可以給網站一個很好的補充。

下載地址

https://github.com/markdalgleish/stellar.js

特性

視差滾動效果酷炫，適合於個性展示的場合。

視差滾動徐徐展開，適合於娓娓道來，講故事的場合。

視差滾動容易迷航，需要具備較強的導航功能。

原理

內容和多層次的背景實現或不同速度，或不同方向的運動。

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

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

要使用jQuery的選擇器選中所需要的元素

$('#someElement').stellar();

window物件直接使用，或則啟動效果

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

詳細引數

預設引數的使用

$.stellar({
  horizontalScrolling: true,
  verticalScrolling: true,

  horizontalOffset: 0,
  verticalOffset: 0,

  responsive: false,

  // 選擇 'scroll', 'position', 'margin' or 'transform',
  // or write your own 'scrollProperty' plugin.
  scrollProperty: 'scroll',

  // 'position' 或 'transform',
  positionProperty: 'position',

  // 視差
  parallaxBackgrounds: true,
  parallaxElements: true,

  hideDistantElements: true,

  // Customise how elements are shown and hidden
  hideElement: function($elem) { $elem.hide(); },
  showElement: function($elem) { $elem.show(); }
});

優缺點

1. 這種效果可以給網站一個很好的補充，但如果濫用，就會很煩人。
2. 這種通常使用大圖作為背景，會導致載入緩慢。

注意點

1. 可能3以上的jquery版本會報錯
2. data-stellar-background-ratio=“0.3” 設定背景滾動速度
3. data-stellar-ratio=“2” 設定元素滾動速度
4. 記得$.stellar()呼叫