• <nav id="i44m4"></nav>
  • <kbd id="i44m4"></kbd>
    經典案例推廣高端H5電商設計公司聯系報價
    QQ聯系
    微信聯系
    手機聯系
    QQ聯系
    微信聯系
    手機聯系

    使用Stellar.js為網站添加滾動視差效果

    發布時間:2019-07-31
    發布者:eidea
    瀏覽次數:2869
    近些年討論得很熱烈的設計趨勢是視覺差滾動效果。不管你喜不喜歡,很多網站都在用它。發現Stellar.js 是一個偶然的機會,查看一個國外非??岬木W站源碼的時候,發現它。然后再搜索一下得知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/

    網站案例欣賞

    天禹文化

    響應式企業官網

    新大陸支付

    響應式企業官網

    一點傳媒

    單頁式自適應業務官網

    老板把我摁倒在办公桌啪啪_人禽杂交在线播放网站_我原来是富二代_女人和男人啪视频在线观看_又黄又刺激超爽动态图_色偷偷2019免费视频观看