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

Lin_R 發布于2019-08-21 10:26 / 2361人閱讀

摘要：近些年討論得很熱烈的設計趨勢是視覺差滾動效果。在本教程中，我會介紹視覺差滾動和用插件來制作視覺差滾動效果。如果你想使用，可以通過以下命令下載好后，在頁面中引用完成后，開始給頁面添加視覺差滾動效果。在一個頁面運用創建一個視差滾動效果的示例。

近些年討論得很熱烈的設計趨勢是視覺差滾動效果。不管你喜不喜歡，很多網站都在用它。在本教程中，我會介紹視覺差滾動和用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

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

完成后，開始給頁面添加視覺差滾動效果。這個插件允許將效果添加到任何滾動的元素，例如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：


    TEXT HERE


    TEXT HERE


    TEXT HERE


    TEXT HERE


    TEXT HERE


    TEXT HERE

添加一些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整理編譯

云服務器 GPU云服務器視差滾動效果滾動視差視差滾動視差效果

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85540.html

javascript功能插件大集合前端常用插件 js常用插件

摘要：轉載來源包管理器管理著庫，并提供讀取和打包它們的工具。能構建更好應用的客戶端包管理器。一個整合和的最佳思想，使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數據。轉載來源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。?npm – npm 是 javasc...

netmou 2019-08-23 12:28 評論0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：轉載來源包管理器管理著庫，并提供讀取和打包它們的工具。能構建更好應用的客戶端包管理器。一個整合和的最佳思想，使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數據。轉載來源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。?npm – npm 是 javasc...

Hydrogen 2019-08-02 11:46 評論0 收藏0
javascript功能插件大集合，寫前端的親們記得收藏

摘要：一個專注于瀏覽器端和兼容的包管理器。一個整合和的最佳思想，使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。完全插件化的工具，能在中識別和記錄模式。健壯的優雅且功能豐富的模板引擎。完整的經過充分測試和記錄數據結構的庫。【導讀】：GitHub 上有一個 Awesome – XXX 系列的資源整理。awesome-javascript 是 sorrycc 發起維護的 JS 資源列表...

cfanr 2019-08-20 10:34 評論0 收藏0
JavaScript 資源大全中文版

摘要：官網全新的靜態包管理器。官網一個整合和官網的最佳思想，使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。官網小巧的兼容的所見即所得的富文本編輯器。官網富文本編輯器。官網由制作，適用于每天寫作的富文本編輯器。 1. 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。 npm：npm 是 javascript 的包管理器。官網 cnpm：cnpm 是由于國...

jzman 2019-08-23 17:18 評論0 收藏0
滾動視差？CSS 不在話下

摘要：可以感受下種不同取值的不同效果使用實現滾動視差首先，我們使用來實現滾動視差。何為滾動視差視差滾動（Parallax Scrolling）是指讓多層背景以不同的速度移動，形成立體的運動效果，帶來非常出色的視覺體驗。作為網頁設計的熱點趨勢，越來越多的網站應用了這項技術。通常而言，滾動視差在前端需要輔助 Javascript 才能實現。當然，其實 CSS 在實現滾動視差效果方面，也有著不俗...

RobinTang 2019-04-23 13:29 評論0 收藏0