Shopify Free Trial Apply
Shopify 60天试用
Shopify 14天试用

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();
1
2018-11-02

2 个评论

另外,我们常用的WPBakery Page Builder可视化编辑器也可以给每一个element增加动画入场效果
感谢分享,加载了这种动画,会给前端增色不少。

要回复文章请先登录注册