視差滾動插件之Stellar

視差滾動插件之Stellar

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

原理

傳統的網頁的文字、圖片、背景都是一塊兒按照相同方向相同速度滾動的，而視差滾動則是在滾動的時候，內容和多層次的背景實現或不一樣速度，或不一樣方向的運動。

有的時候也能夠加上一些透明度、大小的動畫來優化顯示。

利用background-attachment屬性實現。

background-attachment: fixed || scroll || local

Stellar.js是什麼？

[stellar.js]是一個 jQuery插件，能很容易地給網站添加視差滾動效果。 儘管已經中止了維護，但它很是穩定，與最新版本的jQuery兼容，不少開發者也在使用它。 這個插件在jQuery插件庫裏很流行。

markdalgleish.com/projects/st… 官網

引用 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調用函數

$.stellar({
    horizontalScrolling: false,
    responsive: true
});
複製代碼

詳細參數

名稱	說明
horizontalScrolling 和 verticalScrolling	該配置項用來設置視差效果的方向。horizontalScrolling設置水平方向，verticalScro設置垂直方向， 爲布爾值，默認爲true
responsive	該配置項用來制定load或者resize時間觸發時是否刷新頁面，其值爲布爾值，默認爲false
hideDistantElements	該配置項用來設置移出視線的元素是否隱藏，其值爲布爾值，若不想隱藏則設置爲false`
data-stellar-ratio="2"	定義了此元素針對頁面滾動的速度比率，好比，0.5爲頁面滾動的50%，2爲頁面滾動的200%，因此數值越大，你能夠看到頁面元素滾動速度越快。
data-stellar-background-ratio	該配置項用在單個元素中，其值爲一個正數，用來改變被設置元素的影響速度。 例如 值爲0.3時，則表示背景的滾動速度爲正常滾動速度的0.3倍。若是值爲小數時最好在樣式表中設置