javascript - 像电影一样滚动时的页面动画

标签 javascript css animation scroll

我找到了这个页面 http://www.wanderworld.io/当您滚动它的开始动画时,滚动和场景正在改变。如何创建这样的东西?请帮助我,关于 jsffidle 或 codepen 的任何例子?

最佳答案

为了给您指明正确的方向,这称为视差滚动,可以使用 CSS 来完成,但最常见的是使用 Javascript/jQuery.

这个库非常适合视差动画,并且可能会完成示例站点所做的大部分(如果不是全部的话):http://prinzhorn.github.io/skrollr/

基本上,我们的想法是让页面滚动监听器跟踪 window.scroll 位置。在某些范围内,元素会移入和移出屏幕。它背后的概念相对简单,但实现起来可能很困难,而且可以根据您的选择进行复杂化。

关于javascript - 像电影一样滚动时的页面动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26811399/

相关文章:

javascript - ReactJs:是否可以按类名将 DOM 呈现为文档?

javascript - SoundCloud 流暂停按钮不起作用

html - 制作这个容器的最语义化的方式

css - 如何在 BuddyPress 子主题中拉伸(stretch) IE 中的背景图像

javascript - iOS 键盘使用 Phonegap 调整屏幕大小

java - 如何停止 ScheduledExecutorService 的工作?

JavaScript 全局变量作用域问题

Javascript onclick 未触发

cocoa - 全屏狮子复合动画

javascript - 如何在 HTML 文件中为外部 SVG 文件制作动画?