0

我正在寻找一个网站,当您向下滚动时,您的内容会从右侧、左侧、底部和顶部移入,我知道这是可能的,因为我最近看到了这个汽车网站,它基本上是一部内容从所有地方飞入的电影方向,但吹嘘自己是一个完整的 CSS 网站。

Link: http://graphicnovel-hybrid4.peugeot.com/start.html

问题是我不知道从哪里开始,任何教程或建议都会很棒!

编辑

澄清一下,我想要它,以便您访问该页面并看到 DIV1。

向下滚动,DIV2 从右侧进入,然后占据屏幕。

再向下滚动一点,然后 DIV3 从顶部进入并占据屏幕。

向下滚动一点,DIV4 从屏幕底部进入。

在顶部有一个用于自动播放的按钮,然后它会完成很多工作。

我了解并且已经熟悉以下可用于此目的的 CSS 样式:

position: fixed; width:100%;

我不熟悉 CSS 动画,这就是我需要帮助的地方。

4

2 回答 2

0

无需过多研究他们是如何做到这一点的,似乎大多数元素都是根据屏幕尺寸确定和计算的,并且只是简单地相互叠加。

要移动元素,您需要“滚动劫持”页面(我个人不喜欢在大多数网站上),然后将其平移到 x 和 y 轴。

最好的方法,一般来说是使用 CSS3 转换。Transition.js是一个很棒的库,用于动态修改 JavaScript 中的翻译。


警告:滚动事件可能会在某些浏览器上排队,因此如果用户滚动得非常快并且您在每个“事件”上运行代码,页面就会锁定。有关去抖动事件的说明,请参阅本文

于 2013-09-16T03:45:31.637 回答
0

您可以使用 jquery 并执行 .scroll 并将 div 向右转换。

于 2013-09-16T03:39:45.263 回答