2014-10-27 152 views
2

我想動畫在js上滾動一個簡單的div,你可以在這裏找到grooveshark。你可以看到,動畫作出反應向上/向下滾動並水平移動。 這通常是我需要的。我怎樣才能輕鬆地在js中確定這個功能?由於如何從左向右滾動滾動div?

+0

你試過甚麼? – prog1011 2014-10-27 09:52:38

+0

你試過谷歌嗎? http://stackoverflow.com/questions/2346958/how-to-do-a-horizo​​ntal-scroll-on-mouse-wheel-scroll – MasterD 2014-10-27 09:54:25

回答

3

這就是所謂的視差

你可以做到這一點使用的CSS屬性的變化組合自己和滾動檢測事件,或者只是使用像SkrollR http://prinzhorn.github.io/skrollr/

插件對於這個特殊的例子,你可以看到內嵌樣式的該分區被改變的滾動(開發人員工具):

<div class="albums-holder" style="background-position: 1174px 50%;">... 

您可以在滾動事件做到這一點:

$(window).scroll(function() { 
    $(".albums-holder").css("background-position", [VALUE]); 
}); 

[VALUE]將通過每次增加/減少背景位置值來計算。

編輯:我沒有提到,我的回答是基於你在頁面上有jQuery的假設,我推薦它是這樣的任務。

+0

非常感謝這個完整的答覆! – bep42 2014-10-27 10:26:20

+0

沒問題的隊友,順便說一句,漂亮,簡單。 – 2014-10-27 10:29:19