推荐几款制作网页滚动动画的 JavaScript 库【炫酷】

http://www.cnblogs.com/lhb25/p/page-scrolling-effects-plugins.html

这里集合了几款很棒的制作网页滚动动画的 JavaScript 库和插件。它们中,有的可以帮助你在页面滚动的时候添加动感的元素动画,有的则是实现目前非常流行的全屏页面切换动画。相信借助这些插件,你也可以让网站变得高大上起来。

ScrollReveal.js

  ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果,帮助你的网站增加吸引力。只需要给元素增加 data-scrollreveal 属性,当元素进入可视区域的时候会自动被触发设置好的动画。

 

推荐几款制作网页滚动动画的 JavaScript 库【炫酷】

 

在线演示     立即下载

 

ScrollMagic

  ScrollMagic 是一款 jQuery 插件,它让你可以像使用进度条一样使用滚动条。如果你想在特定的滚动位置开始一个动画,并且让动画同步滚动条的动作,或者把元素粘在一个特定的滚动位置,那么这款插件正是你需要的。

 

推荐几款制作网页滚动动画的 JavaScript 库【炫酷】

 

在线演示      立即下载

 

pagePiling.js

  全屏滚动效果是最近非常流行的网页设计形式,带给用户良好的视觉和交互体验。pagePiling.js 这款 jQuery 插件可以帮助前端开发人员轻松实现这种效果。支持所有的主流浏览器,包括IE8+,支持移动设备。

 

推荐几款制作网页滚动动画的 JavaScript 库【炫酷】

 

效果演示     插件下载

 

WOW.js

  在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感。WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格、延迟、长度、偏移和迭代等。

 

推荐几款制作网页滚动动画的 JavaScript 库【炫酷】

 

效果演示      立即下载

 

ScrollMe

  ScrollMe 是一款 jQuery 插件,用于给网页添加简单的滚动效果。当你向下滚动页面的时候,ScrollMe 可以缩放,旋转和平移页面上的元素。它易于设置,不需要任何自定义的 JavaScript 代码支持。

 

推荐几款制作网页滚动动画的 JavaScript 库【炫酷】

 

在线演示      源码下载   

 

Parallax.js

  Parallax.js 是一个简单的,轻量级的的视差引擎,能够对智能设备的方向作出反应。在没有没有陀螺仪或运动检测硬件可用的时候,使用 光标的位置来代替。有很多的行为,你就可以设置为任何给定的视差实例。这些行为既可以通过在标记中指定的数据属性或通过构造函数 和 JavaScript API 调用。

 

推荐几款制作网页滚动动画的 JavaScript 库【炫酷】

 

效果演示      插件下载

转载于:https://www.cnblogs.com/shimily/articles/4177301.html