Duang特效插件:duang.js
不知道怎么的,这两天看到各种新闻都夹杂着“Duang”新词,不管是科技新闻还是娱乐新闻,“Duang”的身影如影随形,这个“Duang”究竟从何而来?是怎么火的?我特意查询了一下,原来是这么回事:
(摘自互联网对Duang的描述)
这次恶搞的主要内容来自成龙的一段采访视频:“当我第一次知道要拍洗发水广告的时候,其实我是拒绝的……导演跟我讲,拍完加特技,头发很黑很亮很柔……之后呢,头发duang duang duang”随后,成龙微博被大量网友用“duang duang ”留言攻陷。2月26日晚间,成龙在转发微博时用“duang”自嘲又引发了大量网友围观。段子手和网友们也都“再接再厉”,尽情发挥,相继编出了各种有趣的延伸版本,奠定了“duang”在2015年新年后的第一网络热词的地位。
更有趣的是,切图网率先根据“Duang”的解释“加特效”完成了一次概念到视觉效果的展现,将网页中的dom元素,通过js模拟了弹性物体向地面掉落时候的情景,“duang duang duang”不停。
已经集成为一款jQuery插件,支持回调函数,和延时Duang~
duang插件:http://www.qietu.com/p/duang.js
让网站动起来的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
文章为作者独立观点不代本网立场,未经允许不得转载。