geekwen.com

滚动滚轮触发动画

现在很多网站的都有很炫的效果,比如:MacBook、锤子、搜狗浏览器。滚动鼠标滚轮,就会有各种炫酷的动画。乍一看很高深,背后最根本的原理其实并不复杂。本文通过一简单的案例,来分析这种效果的实现。

本文示例是在 滚动条触发CSS3动画 此文的基础上修改而来。此文分析得非常清楚,我就不再赘余了,仅指明最关键的一个地方:

计算元素是否进入视窗:

1
if (scrolled + w_height – 50 > offsetTop)

弄清楚这个地方,基本上应该就能搞清楚了。再复杂的动画,一般都是基于这种方式。另外需指明的是:与链接文中的示例不同之处在于,本文示例中的动画效果是通过添加class而非直接用js。这样做的好处是让css来处理所有的动画,js来控制逻辑,结构更清晰。

示例如下:

See the Pen 滚动触发动画 by geekwen (@geekwen) on CodePen.