前端——Stellar.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 });