用 Stellar.js 製作視差滾動效果

江小湖Laker發表於2015-02-26
JS

近些年討論得很熱烈的設計趨勢是視覺差滾動效果。不管你喜不喜歡，很多網站都在用它。在本教程中，我會介紹視覺差滾動和用jQuery外掛Stellar.js來製作視覺差滾動效果。

視差滾動（Parallax Scrolling）是什麼？

視差滾動是當使用者滾動頁面時，前景和背景以不同的速度移動，從而創造出3D效果。 這種效果可以給網站一個很好的補充，但如果濫用，就會很煩人。 有些完全由這種效果驅動的網站會讓人覺得不優雅。 因為這種效果通常使用大影像做背景，網站資源大量增加，導致載入非常緩慢。

有些這樣濫用的例子，比如介紹Kinvara saukoni 3的網站， 和大小有20MB（以前是50MB的！）的 Oakley – I am invincible 。

現在有了對這個效果的認識，讓我們看看如何使用stellar.js來創造它。

Stellar.js是什麼？

stellar.js 是一個 jQuery外掛，能很容易地給網站新增視差滾動效果。 儘管已經停止了維護，但它非常穩定，與最新版本的jQuery相容，很多開發者也在使用它。 這個外掛在jQuery外掛庫裡很流行，你可能早已聽說過了。

現在，讓我們看看如何使用它。

Stellar.js入門

Stellar.js很容易上手。 第一步是下載外掛並將它連結到你的頁面。 可以通過Bower訪問Stellar.js的GitHub 倉庫。 如果你想使用Bower，可以通過以下命令：

bower install jquery.stellar

下載好後，在頁面中引用：

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

完成後，開始給頁面新增視覺差滾動效果。 這個外掛允許將效果新增到任何滾動的元素，例如window物件，或者其他元素。 要使用jQuery的選擇器選中所需要的元素，在繫結stellar()方法即可。

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

對於window物件可以用下面的方法：

$.stellar();

這樣，Stellar.js庫就會在元素滾動時搜尋parallax背景或元素，並重新定位。
在一個頁面運用stellar.js建立一個視差滾動效果的示例。

選項

stellar.js像其他外掛一樣有一定的靈活性。 可以設定很多引數來滿足需求。 stellar.js允許定義普通選項，會應用到每個元素。 設定普通配置必須通過stellar()方法，而對應的元素要設定data-*屬性。 我不一一介紹每個配置的用法，具體可以看這裡。

第一個普通選項是設定效果的方向。 經典的滾動效果是從上到下，或者反過來。也可以指定一個從左到右的效果，或者反過來。 通過設定horizontalScrolling 和verticalScrolling的bool值完成。 其預設值是true。

另一個有趣的選項是responsive。 它是用來指定load或resize事件觸發時，是否重新整理頁面。 預設是false。

最後介紹一下hideDistantElements選項。 指定是否要隱藏移出視線的元素。 如果不想隱藏，就設定為false。

單個元素選項中data-stellar-background-ratio比較常用。 接受一個正整數的值，可以改變它被應用到元素的影響速度。 例如，data-stellar-background-ratio="0.5"意味著改變速度為自然滾動速度的一半。 如果想使這個屬性值低於1，建議在樣式表裡設定background-attachment: fixed;。

現在你知道這個外掛，你可以配置它，它的時間去看比賽。

演示

利用上面介紹的屬性做一個例子。 首先，我們需要設定標記。 在下面的程式碼中將建立6個包含一些文字div：

<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： 在演示中將使用三個影像，每個重複兩次。 因為要給最後桑元素新增data-stellar-background-ratio屬性，所以還要設定background-attachment: fixed;。
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("http://www.tamperlock.com/blog/wp-content/uploads/2014/08/london-england.jpg");
}
#content2 {
    background-image: url("http://ocdn.eu/images/pulscms/ZjU7MDQsMCwzMiwzODQsMWZhOzA2LDMyMCwxYzI_/1eb29a70dabd0994cdefaad01ca3c884.jpg");
}
#content3 {
    background-image: url("http://www.zeus.aegee.org/magazine/wp-content/uploads/napoli-golfo-vesuvio.jpg");
}
#content4 {
    background-image: url("http://www.tamperlock.com/blog/wp-content/uploads/2014/08/london-england.jpg");
}
#content5 {
    background-image: url("http://ocdn.eu/images/pulscms/ZjU7MDQsMCwzMiwzODQsMWZhOzA2LDMyMCwxYzI_/1eb29a70dabd0994cdefaad01ca3c884.jpg");
}
#content6 {
    background-image: url("http://www.zeus.aegee.org/magazine/wp-content/uploads/napoli-golfo-vesuvio.jpg");
}

最後，我們需要踢的invokingstellar()啟動效應。在這個演示中我們也會設定一些常用選項：

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

效果：

https://jsfiddle.net/fb301gve/embedded/result/

英文原文：An Introduction to Parallax Scrolling Using Stellar.js
由SegmentFault整理編譯

相關文章