如何用滚动移动html元素？

Question

我想创建可以找到here的滚动行为。如果向下滚动页面，您会发现每当页面移动时，螃蟹，鲨鱼，波浪等都会生动。怎么能实现这一目标？这是脚本还是CSS动画？

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

Answer 1

如果您想要一个更强大的jQuery脚本来帮助您：根据Loading a long page with multiple backgrounds based on vertical scroll value in jQuery?的答案：

  

对于已经很好的一个建议的稍微更全脂的解决方案   Justin将使用jQuery Waypoints来管理视口中的事件。

     

...

（Nicholas Evens的答案）

Answer 2

您需要使用jQuery订阅scroll事件，并使用.scrollTop()属性

来移动基于滚动偏移量的元素

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

Answer 3

这是一个脚本，只需将一个函数绑定到窗口'scroll'事件，并使用回调函数执行任何操作。你可以用window.scrollY来判断你滚动了多远。

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

Answer 4

我没有查看该网站的源代码，但我认为这取决于JS。需要Javascript来监听页面的滚动事件，并根据document.scrollTop的当前值进行操作。然后可以使用JS定位元素，并且可以直接在JS中切换图像，或者使用CSS来更改某个元素的CSS类。

Answer 5

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

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

的脚本