javascript - CSS Scrolldown 和 Div 输入右

Question

我想做一个网站，当你向下滚动时，内容会从右、左、下和上移动，我知道这是可能的，因为我最近看到这个汽车网站，它基本上是一部内容飞扬的电影来自四面八方，但号称是一个完整的 CSS 网站。

链接:http://graphicnovel-hybrid4.peugeot.com/start.html

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

编辑

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

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

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

您再向下滚动一点，DIV4 从屏幕底部出现。

在顶部有一个用于自动播放的按钮，然后它完成了所有操作。

我理解并已经熟练掌握以下可用于此目的的 CSS 样式:

位置:固定；
宽度:100%;

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

Answer 1

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

要移动元素，您需要“scrolljack”页面(我个人不喜欢在大多数网站上这样做)，然后在 x 轴和 y 轴上移动它。

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

---

警告:滚动事件可能会在某些浏览器上排队，因此如果用户滚动得非常快并且您在每个“事件”上运行代码，页面就会锁定。参见 this article去抖动事件的解释。