javascript 滚动_酷滚动效果JavaScript库

精心设计的动画 使网站设计栩栩如生 。 如果您正在寻找合适的库来为您的项目添加效果，那么这里列出了一些库， 您可以根据滚动事件使用这些库来产生效果 。

当用户向下滚动网页时， 可以将动作设计为触发各种动画选项，例如淡入淡出效果，模糊，3D， 视差等。 这里有25个JS库，可以帮助您在网站设计中实现这种响应。

一个可以轻松为Web和移动添加滚动动画的库。 您可以为要设置动画的元素设置自定义缓动，3D旋转，持续时间和许多mor参数。

依赖项：无| 大小： 2.9kb | 执照：麻省理工学院

与Animate.CSS一起使用的插件，仅在元素进入视口时才启用动画。

依赖关系： jQuery | 大小： 1kb | 牌照：不适用

一个在元素进入或退出预定视口时向元素添加淡入/淡出效果的插件。

依赖关系： jQuery | 大小： 3.81kb | 牌照：不适用

WOW将在滚动事件后显示Animate.css动画。 您可以直接从HTML标记设置动画的持续时间，延迟，偏移和迭代，然后只需从JS调用元素的类。

依赖项： Animate.css | 大小： 8.23kb | 执照：麻省理工学院

当用户滚动页面时，此插件将显示“魔术”效果。 非常适合动画，固定元素或切换CSS类（全部基于滚动位置）。 ScrollMagic可以与GSAP和VelocityJS一起创建动画场景。 在此处查看完整的演示。

依赖项： jQuery，GSAP，Velocity.js | 大小： 16.9kb | 执照：麻省理工学院

jScrollability允许您使用复杂的基于滚动的动画创建单个网页。 在用户滚动时，该元素将基于滚动位置进行动画处理。 动画基于滚动深度运行，当然您可以设置动画的开始和结束。

依赖关系： jQuery | 大小： 1.86kb | 执照：麻省理工学院

一个简单的库，用于在用户滚动页面时向所有有效的元素添加手推或推入效果。 它很容易实现：只需将data-params的start，stop和speed参数添加到HTML元素即可。

依赖项：无| 大小： 4.94kb | 牌照：不适用

这是一个JS库，用于添加平滑的滚动控制的动画。 它利用Greensock的补间和时间线生成更流畅的动画。

依赖项： GreenShock TweenLite / TweenMax | 大小： 2.94kb | 牌照：不适用

这是一个jQuery插件，用于使用Greensock添加视口触发的动画。 它使通过缓动，变换，缩放，旋转和3D动画轻松对元素进行动画处理。

依赖项： jQuery，GreenShock | 大小： 14kb | 许可证： GNU GPL

Circlr允许您为元素创建旋转动画，该动画由滚动，鼠标事件或触摸事件触发。 完美展示产品的陈列柜是可以通过用户滚动激活从360度全方位查看的。

依赖项：无| 大小： 6.05kb | 执照：麻省理工学院

Scrollimator将向您显示位置和滚动进度，并返回可用于更改附加到用户滚动行为的补间动画的值。 它支持垂直和水平滚动。

依赖项：无| 大小： 37.7kb | 牌照：不适用

Crossfade是一个向图像添加crossfade效果的插件。 随着用户向下滚动，模糊效果将继续。

依赖关系： jQuery | 大小： 3.19kb | 执照：麻省理工学院

这个库是由CodyHouse创建的用于实验性页面滚动效果的库。 它利用velocitey.js动画。

依赖关系： jQuery，Velocity.js | 大小： 17.6kb | 牌照：不适用

该库使您可以向垂直页面滚动添加平滑的视差效果。 只需导入jQuery和jquery.easing.1.3.js ，然后将'data-parallax'属性和可选参数添加到您的元素即可自定义效果。

依赖项： jQuery，jQuery.easing | 大小： 8.72kb | 许可证： GNU GPL

Parallax.js是一个受Spotify网站启发的简单插件，可添加视差滚动效果。

依赖关系： jQuery | 大小： 6.63kb | 执照：麻省理工学院

Enllax是一个超轻量级的库，用于将视差效果应用于任何滚动元素。 您可以将背景或前景元素设置为具有此效果。 它适用于垂直和水平滚动。

依赖关系： jQuery | 大小： 1.53kb | 执照：麻省理工学院

该库可帮助您将模糊效果添加到图像，该效果将由页面滚动触发。 向下滚动页面越深，图像变得越模糊。

依赖项：无| 大小： 1.1kb | 牌照：不适用

boxLoader是一个简单的插件，可在页面滚动时加载元素。 您应该设置的参数是方向（x或y），位置百分比，效果以及持续时间。

依赖关系： jQuery | 大小： 3.42kb | 牌照：不适用

当用户滚动浏览页面时，此插件将为您设置的元素显示3D倾斜效果。

依赖关系： jQuery | 大小： 1.5kb | 许可证： GNU GPL

AhRelax提供了一种制作基于滚动的快速动画的方法。 它轻巧，性能也很好。 您可以在此处了解更多信息。

依赖关系： jQuery | 大小： 1.6kb | 执照：麻省理工学院

如果您在Android或iOS上看到过溢出滚动效果，则可以使用此插件将其应用于您的网站。 当用户到达页面顶部/底部时，您可以添加动画（反弹或发光）。

依赖关系： jQuery | 大小： 2.64kb | 许可证： GNU GPL

当用户向下或向上滚动页面时，此插件将使元素浮动和移动。

依赖关系： jQuery | 大小： 8.69kb | 执照：麻省理工学院

这是一个小插件，可在用户上下滑动页面时创建流畅的效果。 共有三种效果：滑动，淡入淡出和显示。

依赖关系： jQuery | 大小： 1.95kb | 执照：麻省理工学院

向页面滚动添加简单的效果，例如缩放，旋转，平移和更改元素的不透明度。 设置很容易：只需导入jQuery，此插件，然后在元素的标记上设置动画参数即可。

依赖关系： jQuery | 大小： 5.45kb | 牌照：不适用

此插件可让您为页面上的任何图像赋予视差效果。 它利用CSS3变换使效果起作用。 该插件支持jQuery和AMD 。

依赖关系： jQuery | 大小： 8.01kb | 执照：麻省理工学院

翻译自: https://www.hongkiat.com/blog/scrolling-effects-js-libraries/