如何在Google的收件箱页面中重新创建页面滚动行为?

时间:2014-12-13 09:40:23

标签: javascript html css scroll

我想要实现的是当用户使用鼠标滚轮滚动页面时(因为没有滚动条),页面向下滑动动画到页面的下一部分,同时动画正在玩过,鼠标滚轮不起作用(整理一下,这是一个很好的行为)。

我想要的行为可以在http://google.com/inboxhttp://www.luxaqua-design.com/中找到。

我在Google的收件箱网站上喜欢的是它与触摸屏设备及其滚动机制具有相同的效果。

我只需要一些关于这种滚动中发生的事件以及如何管理它们的指针(特别是,我希望通过触摸设备实现相同的功能)。

2 个答案:

答案 0 :(得分:3)

这是一个视差网站,实际上有很多方法可以实现这一目标。但我想向您推荐FullPage.JS by Alvaro Trigo,您也可以尝试Skrollr by Prinzhorn 。这些是您可以轻松完成目标的库。

顺便说一下,您也可以通过创建一个可以使图像适合每张幻灯片的CSS来手动完成,然后添加JS,这样每当您滚动它时会转到另一张幻灯片,但我告诉您最好使用它库。 :d

答案 1 :(得分:0)

它被称为视差滚动效果..这是一个如何制作它的教程!

https://www.youtube.com/watch?v=D75WTf_Y738

相关问题