WOW.js简单实现页面滚动动画效果

在很多网站博客上,当你滚动页面的时候会看到各式各样的元素动画效果,非常的炫丽,很吸引人。WOW.js就是一款 帮助你实现这种CSS3动画效果的javascript插件,不依赖jQuery,使用相当的简单方便,定制性强,可设计成自己喜欢的动画。

下载WOW.js

前往GitHub进行下载:https://github.com/matthieua/WOW

安装WOW.js

1、链接到CSS动画库

在头部添加如下代码链接animate.css:

<link rel="stylesheet" href="css/animate.css">

2、链接WOW.js

在页脚添加如下代码链接WOW.js:

<script src="js/wow.min.js"></script>

3、激活WOW.js

<script>
    var wow = new WOW({
        boxClass: 'wow',
        animateClass: 'animated',
        offset: 50,
        mobile: true,
        live: true
    });
    wow.init();
</script>

代码很好理解,这些元素都是默认的,后面的值是可以根据情况进行修改。offset后面的参数为元素出现在可视区域的范围,当内容在可视区超过50像素时再触发动画,在桌面时因为屏幕较大,所以这个值我们可以设置大些,不然内容都没有看到,动画已经执行了,在移动端就可以设置少些。

向HTML中添加标签

<section class="wow slideInLeft"></section>
<section class="wow slideInRight"></section>

wow是触发动画的元素,页面滚动出现在可视区时会向有wow元素再添加animated元素,动画是由slideInLeft与slideInRight等元素来生成,在animate.css动画库中有很多动画,可以通过演示来查看。

高级选项

1、改变动画时间data-wow-duration

<section class="wow slideInLeft" data-wow-duration="2s"></section>

2、动画延迟加载时间data-wow-delay

<section class="wow slideInLeft" data-wow-delay="5s"></section>

3、开始动画距离data-wow-offset

<section class="wow slideInLeft" data-wow-offset="10"></section>

4、动画重复的次数data-wow-iteration

<section class="wow slideInLeft" data-wow-iteration="10"></section>
文章链接:https://www.sbkko.com/1-33.html
文章标题:WOW.js简单实现页面滚动动画效果
文章版权:SBKKO 所发布的内容,部分为原创文章,转载请注明来源,网络转载文章如有侵权请联系我们!

给TA打赏
共{{data.count}}人
人已打赏
WP文章文章

WordPress每一年的历史演变(2003 - 2017)

2017-12-9 11:55:41

WP文章文章网站笔记

鼠标点击显示与隐藏更多内容 readmore.js

2017-12-13 14:48:10

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索