js图片特效库、js特效模板 收藏 0

创建酷炫动画效果的10个JavaScript库

Dynamics.js是设计基于物理规律的动画的重要JavaScript库。它可以赋予生命给所有包含CSS 和SVG属性的DOM（文本对象模型）元素，换句话说，Dynamics.js适用于所有JavaScript对象以及一系列其它的元素。目前，Dynamics.js常被用于设计交互式菜单栏、同步下拉菜单、加载器、按钮以及其它功能。这个库提供了可定制动画类型的各种基本选项，如频率、反弹力、旋转、摩擦、持续时间等等。

Cta.js 是用于在网页上创建动画元素“Action-to-Effect”路径的轻量级库。它常被用在tile-based应用程序的导航、模态窗口的打开、侧边栏上可点击的按钮等等。

Beep.js是一个通过使用WebAudio API创建基于网页的电子合成器的JavaScript库。它可以用于创建音乐或者设计和音乐相关的学习教程。

Rainyday.js是一个使用HTML5 canvas创建雨滴落在玻璃表面的出色效果的强大JavaScript库。它拥有一个集成了各种可自定义实现的动画组件的可扩展应用程序接口。

Iconate.js是一个可将设计图标转化为流行动画元素的伟大资源。它拥有大量可供选择的字体、字形图标以及自定义图标集。

Dom-Animator.js是一个在DOM（文本对象模型）中可显示内容节点里ASCII动画的JavaScript库。

Famous 是用于设计流行动画的强大JavaScript库，它包含的基于事件的系统（event-based system）使得渲染平滑动画和过渡特效这类的更新转换工作变得非常简单。Famous还有一个可创建自定义动画和动画仿真的3D物理引擎，你可以做出包含在不同的重力、拖放和碰撞下的粒子或者3D物体的状态。

Bounce.js 是一个在CSS 3的支持下能做出各种酷炫动画的JavaScript库。你可以设计不同的动画和运动效果，如自转、公转、来回运动、急加速等。

Snabbt.js是一个使用CSS3转换矩阵的轻量级JavaScript动画库。它的结构非常简单，支持各种过渡和运动效果的应用，如缩放、尺寸调整、扭曲、旋转等等。Snabbt.js还支持attention animation功能，这个功能在表单验证方面是非常有用的。

Rekapi是用于CSS动画关键帧动画以及DOM中JavaScript动画的高级avaScript库。在复杂动画的设计方面，Rekapi以其实用性被人们广为熟知。您可以使用Rekapi创建生动的饼图和曲线图、五彩纸屑、交互性时间线以及各种用户界面。

本文翻译自codecondo.com

本站文章除注明转载外，均为本站原创或翻译

让网站动起来的js库，真漂亮，再也不用写复杂的动画了~wow.js

越来越多的网站特效很漂亮，其中就有一种我很喜欢的动画，就是当滑动到某个元素的时候，元素就是出现动画效果，如：缩放、旋转、滑动等。感觉很漂亮，之前在做企业站的时候，基本上都是自己手写的，有点麻烦而且效果也不是很好，最近发现了一款比较好用的动画库~~~~wow.js，可以轻松的网站具有这种特效。感受一下吧

Wow.js 的动画效果依赖于第三方库，官方推荐的是： Animate.css

当然也可以使用其它的动画库，需要配置一下 wowo.js。这里就以 Animate.css 为例展开介绍了。有兴趣的同学可以尝试使用一下其它的动画库。

• 引入动画库

• 引入并且使用 wow.js

• 配置一下需要使用动画的元素，为元素的class属性添加一个名为 .wow 的class样式

• 从 Animate.css 选择要使用的动画效果

至此，就已经添加好了一个效果了

可以针对时间、延时等一些配置做具体的修改

还可以通过js一些属性

boxClass: 给需要动画效果的元素 设置的class名称，默认是\”wow\”

animateClass: 需要提供动画的库，默认是由 animate.css 提供

offset: 定义距底部还有多少距离时触发动画效果

mobile: 开启是否在手机上使用动画效果

wow.js 使用的 MIT 开源协议，可以免费的使用，不过你的软件如果是有专利或者需要付费的，请记住在您的产品中包含MIT许可证的全部内容。

wow.js 是一款不错的js特效库，可以方便地给元素添加上滑动出现的效果。大大提高了网站的美观和交互性，并且降低了开发时间和成本。

关注我，分享给您实用的前端知识和优秀的组件库~~

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com