以相對速度滾動的簡單視差

我想創建一個具有簡單視差滾動效果的網站，其中的元素以不同的速度滾動。我試過使用Skrollr庫，但是我無法做到我想做的。我可以使用什麼樣的Javascript庫或技術來輕鬆定義元素的相對滾動速度？以相對速度滾動的簡單視差

例子：

<div data-speed="50%"></div>

我試圖用這個教程：http://coding.smashingmagazine.com/2011/07/12/behind-the-scenes-of-nike-better-world/，但我不能按照它很好。我需要一些非常簡單的東西，因爲我是Javascript的新手。

來源

2013-10-10 Ian

我很高興你發現了stellar.js

如果您（或其他人誰讀這篇文章）正在尋找更多的視差的工具，我的公司和我在https://potentpages.com/web-design/parallax/tutorials

發表視差教程列表

下面是一些產生視差網站的目前使用的方法的方法：

jQuery和基於jQuery的庫（包括stellar.js）
skrollr.js
jarallax
的Javascript（沒有任何庫）
CSS（無JavaScript的）

我們鏈接到一些教程，這些方法在上面的鏈接。

來源

2013-12-14 00:58:40 David

potentpages鏈接已關閉 – user2602152

謝謝您讓我知道。該鏈接現在應該被修復。 – David

-1

我通過使用Stellar.js庫來解決這個問題 - 更好地適用於此。

來源

2013-10-11 02:54:31 Ian

我剛剛給自己回答了這個問題。我不想使用任何庫，因爲我只需要一個簡單的效果，而且我感覺解決方案應該很簡單，只要我想要一個簡單的結果即可。因此，首先談到SCSS混入（你可以用香草CSS做吧）：

@mixin background-fixed($url) { 
    background-image: url($url); 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: auto 100vh; 
}

你可以用大小和位置，雖然玩。但在我的愚見中，我給出了最常用的例子。接下來我們使用mixin來創建具有視差效果的造型塊：

#block-id { 
    @include background-fixed('/images/your_img.jpg'); 
}

接下來我們需要一些jquery腳本。首先，讓我們創建一些功能，使我們的編碼器的生活更輕鬆：

function inVisibleRange(block) { 
    return ($(window).scrollTop() <= $(block).offset().top + $(block).outerHeight() && $(window).scrollTop() >= $(block).offset().top - $(window).height()) 
} 

function parallaxScroll(block) { 
    if (inVisibleRange(block)) { 
    $(block).css('background-position-y', $(window).scrollTop() - $(block).offset().top + 'px'); 
    } 
}

最後，我們使用窗口滾動事件處理中此功能：

$(window).scroll(function() { 
    parallaxScroll('#block-id'); 
}

在這裏，我們有所需的視差背景效果。但是正如你所看到的視差效果的速度等於滾動速度。如果我們想自定義的視差效果的速度（這裏是一些街頭魔術），我們使用無非就是一個簡單的除法運算，並將其應用到background-position-y計算：

($(window).scrollTop() - $(block).offset().top)/1.3

是的，我們失去了一些小零件在頂部和底部的圖像。但我覺得這是一個很好的黑客，不會以不好的方式影響外觀。用斧頭切割簡單。但是我們是否需要超級激光切割一棵小樹？那麼，我認爲，對於我來說，我當然更喜歡用很酷的激光器來切割它。但讓我們不要考慮這一點，並假裝像我的比喻是在正確的地方。

來源

2017-11-07 19:34:09

以相對速度滾動的簡單視差

回答

相關問題