成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

用 Stellar.js 制作視差滾動(dòng)效果

Lin_R / 2367人閱讀

摘要：近些年討論得很熱烈的設(shè)計(jì)趨勢(shì)是視覺(jué)差滾動(dòng)效果。在本教程中，我會(huì)介紹視覺(jué)差滾動(dòng)和用插件來(lái)制作視覺(jué)差滾動(dòng)效果。如果你想使用，可以通過(guò)以下命令下載好后，在頁(yè)面中引用完成后，開(kāi)始給頁(yè)面添加視覺(jué)差滾動(dòng)效果。在一個(gè)頁(yè)面運(yùn)用創(chuàng)建一個(gè)視差滾動(dòng)效果的示例。

近些年討論得很熱烈的設(shè)計(jì)趨勢(shì)是視覺(jué)差滾動(dòng)效果。不管你喜不喜歡，很多網(wǎng)站都在用它。在本教程中，我會(huì)介紹視覺(jué)差滾動(dòng)和用jQuery插件Stellar.js來(lái)制作視覺(jué)差滾動(dòng)效果。

視差滾動(dòng)（Parallax Scrolling）是什么？

視差滾動(dòng)是當(dāng)用戶(hù)滾動(dòng)頁(yè)面時(shí)，前景和背景以不同的速度移動(dòng)，從而創(chuàng)造出3D效果。 這種效果可以給網(wǎng)站一個(gè)很好的補(bǔ)充，但如果濫用，就會(huì)很煩人。 有些完全由這種效果驅(qū)動(dòng)的網(wǎng)站會(huì)讓人覺(jué)得不優(yōu)雅。 因?yàn)檫@種效果通常使用大圖像做背景，網(wǎng)站資源大量增加，導(dǎo)致加載非常緩慢。

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

現(xiàn)在有了對(duì)這個(gè)效果的認(rèn)識(shí)，讓我們看看如何使用stellar.js來(lái)創(chuàng)造它。

Stellar.js是什么？

stellar.js 是一個(gè) jQuery插件，能很容易地給網(wǎng)站添加視差滾動(dòng)效果。 盡管已經(jīng)停止了維護(hù)，但它非常穩(wěn)定，與最新版本的jQuery兼容，很多開(kāi)發(fā)者也在使用它。 這個(gè)插件在jQuery插件庫(kù)里很流行，你可能早已聽(tīng)說(shuō)過(guò)了。

現(xiàn)在，讓我們看看如何使用它。

Stellar.js入門(mén)

Stellar.js很容易上手。 第一步是下載插件并將它鏈接到你的頁(yè)面。 可以通過(guò)Bower訪問(wèn)Stellar.js的GitHub 倉(cāng)庫(kù)。 如果你想使用Bower，可以通過(guò)以下命令：

bower install jquery.stellar

下載好后，在頁(yè)面中引用：

完成后，開(kāi)始給頁(yè)面添加視覺(jué)差滾動(dòng)效果。 這個(gè)插件允許將效果添加到任何滾動(dòng)的元素，例如window對(duì)象，或者其他元素。 要使用jQuery的選擇器選中所需要的元素，在綁定stellar()方法即可。

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

對(duì)于window對(duì)象可以用下面的方法：

$.stellar();

這樣，Stellar.js庫(kù)就會(huì)在元素滾動(dòng)時(shí)搜索parallax背景或元素，并重新定位。
在一個(gè)頁(yè)面運(yùn)用stellar.js創(chuàng)建一個(gè)視差滾動(dòng)效果的示例。

選項(xiàng)

stellar.js像其他插件一樣有一定的靈活性。 可以設(shè)置很多參數(shù)來(lái)滿足需求。 stellar.js允許定義普通選項(xiàng)，會(huì)應(yīng)用到每個(gè)元素。 設(shè)置普通配置必須通過(guò)stellar()方法，而對(duì)應(yīng)的元素要設(shè)置data-*屬性。 我不一一介紹每個(gè)配置的用法，具體可以看這里。

第一個(gè)普通選項(xiàng)是設(shè)置效果的方向。 經(jīng)典的滾動(dòng)效果是從上到下，或者反過(guò)來(lái)。也可以指定一個(gè)從左到右的效果，或者反過(guò)來(lái)。 通過(guò)設(shè)置horizontalScrolling 和verticalScrolling的bool值完成。 其默認(rèn)值是true。

另一個(gè)有趣的選項(xiàng)是responsive。 它是用來(lái)指定load或resize事件觸發(fā)時(shí)，是否刷新頁(yè)面。 默認(rèn)是false。

最后介紹一下hideDistantElements選項(xiàng)。 指定是否要隱藏移出視線的元素。 如果不想隱藏，就設(shè)置為false。

單個(gè)元素選項(xiàng)中data-stellar-background-ratio比較常用。 接受一個(gè)正整數(shù)的值，可以改變它被應(yīng)用到元素的影響速度。 例如，data-stellar-background-ratio="0.5"意味著改變速度為自然滾動(dòng)速度的一半。 如果想使這個(gè)屬性值低于1，建議在樣式表里設(shè)置background-attachment: fixed;。

現(xiàn)在你知道這個(gè)插件，你可以配置它，它的時(shí)間去看比賽。

演示

利用上面介紹的屬性做一個(gè)例子。 首先，我們需要設(shè)置標(biāo)記。 在下面的代碼中將創(chuàng)建6個(gè)包含一些文本div：


    
TEXT HERE





    
TEXT HERE





    
TEXT HERE





    
TEXT HERE





    
TEXT HERE





    
TEXT HERE

添加一些CSS： 在演示中將使用三個(gè)圖像，每個(gè)重復(fù)兩次。 因?yàn)橐o最后桑元素添加data-stellar-background-ratio屬性，所以還要設(shè)置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()啟動(dòng)效應(yīng)。在這個(gè)演示中我們也會(huì)設(shè)置一些常用選項(xiàng)：

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/85540.html

相關(guān)文章

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

    摘要：轉(zhuǎn)載來(lái)源包管理器管理著庫(kù)，并提供讀取和打包它們的工具。能構(gòu)建更好應(yīng)用的客戶(hù)端包管理器。一個(gè)整合和的最佳思想，使開(kāi)發(fā)者能快速方便地組織和編寫(xiě)前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶(hù)數(shù)據(jù)。 轉(zhuǎn)載來(lái)源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫(kù)，并提供讀取和打包它們的工具。?npm – npm 是 javasc...

    netmou 評(píng)論0 收藏0

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

    摘要：轉(zhuǎn)載來(lái)源包管理器管理著庫(kù)，并提供讀取和打包它們的工具。能構(gòu)建更好應(yīng)用的客戶(hù)端包管理器。一個(gè)整合和的最佳思想，使開(kāi)發(fā)者能快速方便地組織和編寫(xiě)前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶(hù)數(shù)據(jù)。 轉(zhuǎn)載來(lái)源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫(kù)，并提供讀取和打包它們的工具。?npm – npm 是 javasc...

    Hydrogen 評(píng)論0 收藏0

  • javascript功能插件大集合，寫(xiě)前端的親們記得收藏

    摘要：一個(gè)專(zhuān)注于瀏覽器端和兼容的包管理器。一個(gè)整合和的最佳思想，使開(kāi)發(fā)者能快速方便地組織和編寫(xiě)前端代碼的下一代包管理器。完全插件化的工具，能在中識(shí)別和記錄模式。健壯的優(yōu)雅且功能豐富的模板引擎。完整的經(jīng)過(guò)充分測(cè)試和記錄數(shù)據(jù)結(jié)構(gòu)的庫(kù)。 【導(dǎo)讀】：GitHub 上有一個(gè) Awesome – XXX 系列的資源整理。awesome-javascript 是 sorrycc 發(fā)起維護(hù)的 JS 資源列表...

    cfanr 評(píng)論0 收藏0

  • JavaScript 資源大全中文版

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

    jzman 評(píng)論0 收藏0

  • 滾動(dòng)視差？CSS 不在話下

    摘要：可以感受下種不同取值的不同效果使用實(shí)現(xiàn)滾動(dòng)視差首先，我們使用來(lái)實(shí)現(xiàn)滾動(dòng)視差。何為滾動(dòng)視差 視差滾動(dòng)（Parallax Scrolling）是指讓多層背景以不同的速度移動(dòng)，形成立體的運(yùn)動(dòng)效果，帶來(lái)非常出色的視覺(jué)體驗(yàn)。 作為網(wǎng)頁(yè)設(shè)計(jì)的熱點(diǎn)趨勢(shì)，越來(lái)越多的網(wǎng)站應(yīng)用了這項(xiàng)技術(shù)。 通常而言，滾動(dòng)視差在前端需要輔助 Javascript 才能實(shí)現(xiàn)。當(dāng)然，其實(shí) CSS 在實(shí)現(xiàn)滾動(dòng)視差效果方面，也有著不俗...

    RobinTang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<