如何用滚动移动html元素？

问题描述：

我想创建滚动行为，比如可以找到的东西here。如果您向下滚动页面，您会注意到螃蟹，鲨鱼，海浪等在页面移动时都会生成动画。这怎么能实现？这是一个脚本或CSS动画？如何用滚动移动html元素？

编辑：文字气泡也出现和消失在不同的滚动点。

答

稍微Justin建议的已经很棒的解决方案是使用jQuery Waypoints来管理视口事件。

...

（由Nicholas Evens答案）

Wow Waypoint看起来很棒。 – providence

答

你需要使用jQuery订阅scroll事件和移动你的元素基础上滚动偏移whitch可以使用.scrollTop()财产

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

答

达到它是一个脚本，只是一个函数绑定到窗口“滚动”带有回调函数的事件可以做任何你想做的事情。你可以告诉你用window.scrollY滚动了多远。

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

如何浏览器密集是该解决方案？我正在运行'if（window.scrollY> 1700）'然后将一个div动画到框架中。 – BHOLT

答

我没有看网站的源代码，但我相信这取决于JS。必须使用Javascript来收听页面的滚动事件，并根据当前值document.scrollTop采取行动。然后这些元素可以用JS定位，并且图像可以直接在JS中切换，或者使用CSS来改变某个元素的CSS类。

答

这是一个脚本，你可以附加一个onscroll事件并获取当前滚动的百分比，并根据它来定位你的“螃蟹”。

已经有很多如何获得百分比here