如何用滾動移動html元素？

我想創建滾動行爲，比如可以找到的東西here。如果您向下滾動頁面，您會注意到螃蟹，鯊魚，海浪等在頁面移動時都會生成動畫。這怎麼能實現？這是一個腳本或CSS動畫？如何用滾動移動html元素？

編輯：文字氣泡也出現和消失在不同的滾動點。

2011-09-02 providence

稍微Justin建議的已經很棒的解決方案是使用jQuery Waypoints來管理視口事件。

...

（由Nicholas Evens答案）

2011-09-02 18:03:36

Wow Waypoint看起來很棒。 – providence

你需要使用jQuery訂閱scroll事件和移動你的元素基礎上滾動偏移whitch可以使用.scrollTop()財產

$(window).scroll(function() { 
    var scrollOffset = $(this).scrollTop(); 
    // move element to the offcet 
});

2011-09-02 17:55:28 Samich

達到它是一個腳本，只是一個函數綁定到窗口「滾動」帶有回調函數的事件可以做任何你想做的事情。你可以告訴你用window.scrollY滾動了多遠。

$(window).bind('scroll', function() { 
    console.log(window.scrollY); 
});

2011-09-02 17:57:27 Bobby

如何瀏覽器密集是該解決方案？我正在運行'if（window.scrollY> 1700）'然後將一個div動畫到框架中。 – BHOLT

我沒有看網站的源代碼，但我相信這取決於JS。必須使用Javascript來收聽頁面的滾動事件，並根據當前值document.scrollTop採取行動。然後這些元素可以用JS定位，並且圖像可以直接在JS中切換，或者使用CSS來改變某個元素的CSS類。

2011-09-02 17:58:06 bfavaretto

這是一個腳本，你可以附加一個onscroll事件並獲取當前滾動的百分比，並根據它來定位你的「螃蟹」。

已經有很多如何獲得百分比here

2011-09-02 18:02:10 Shedokan

回答