wow.js为网站增色
不多说先看效果
http://igeelee.dfsj.net/
http://sunbright.dfsj.net/
是不是觉得很有趣,这样小小的一款插件就能做出这么多动画效果。
一些小小的细节效果能为网站增色不少,下面就让我们来学习如何使用这款插件。
首先可以参考这篇教程
https://www.eastdesign.net/juanyongdongfangimaginationinspirationshowtime2017518/
1、引入文件
<link rel="stylesheet" href="animate.min.css">
<script src="wow.min.js"></script>
2、HTML
<div class="wow slideInLeft"></div>
<div class="wow slideInRight"></div>
可以加入 data-wow-duration(动画持续时间)和 data-wow-delay(动画延迟时间)属性,如:
<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div>
<div class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10"></div>
(具体动画效果,可以在animate.css中找,动画效果很多,根据实际需求来)
3、JavaScript
new WOW().init(); //这种方法,有局限,移动端会出现横向滚动条
如果需要自定义配置,可如下使用:(推荐这种方法,移动端perfect)
var wow = new WOW({
boxClass: 'wow',
animateClass: 'animated',
offset: 0,
mobile: true,
live: true
});
wow.init();
http://igeelee.dfsj.net/
http://sunbright.dfsj.net/
是不是觉得很有趣,这样小小的一款插件就能做出这么多动画效果。
一些小小的细节效果能为网站增色不少,下面就让我们来学习如何使用这款插件。
首先可以参考这篇教程
https://www.eastdesign.net/juanyongdongfangimaginationinspirationshowtime2017518/
1、引入文件
<link rel="stylesheet" href="animate.min.css">
<script src="wow.min.js"></script>
2、HTML
<div class="wow slideInLeft"></div>
<div class="wow slideInRight"></div>
可以加入 data-wow-duration(动画持续时间)和 data-wow-delay(动画延迟时间)属性,如:
<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div>
<div class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10"></div>
(具体动画效果,可以在animate.css中找,动画效果很多,根据实际需求来)
3、JavaScript
new WOW().init(); //这种方法,有局限,移动端会出现横向滚动条
如果需要自定义配置,可如下使用:(推荐这种方法,移动端perfect)
var wow = new WOW({
boxClass: 'wow',
animateClass: 'animated',
offset: 0,
mobile: true,
live: true
});
wow.init();
2 个评论
另外,我们常用的WPBakery Page Builder可视化编辑器也可以给每一个element增加动画入场效果
感谢分享,加载了这种动画,会给前端增色不少。