CSS Scroll Down和Div输入Right

时间:2013-09-15 07:31:18

标签: javascript html css animated

我希望建立一个网站,当你向下滚动时,你的内容从右,左,下,顶进入,我知道这是可能的,因为我最近看到这个汽车网站基本上是一部内容飞行的电影来自各个方向,但吹嘘自己是一个完整的CSS网站。

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

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

修改

只是为了澄清,我想要它,所以你访问页面,你看到DIV1。

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

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

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

在顶部有一个自动播放按钮,然后它可以完成所有操作。

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

position: fixed; width:100%;

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

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

如果不考虑他们如何做到这一点,似乎大多数元素都是根据屏幕尺寸进行调整和计算,并简单地叠加在一起。

要移动元素,您需要“scrolljack”页面(我个人不喜欢大多数网站),然后在x和y轴上进行翻译。

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


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