页面滚动时触发动画特效 wow.js + Animate.css

在页面添加初始动画特效
在页面添加初始动画特效的时候无意接触到wow.js 这个动画库配合Animate.css可以按照模板快速创建动画效果,虽然动画效果就像ppt里面的动画效果一样。。。

环境设置
添加动画效果,首先要设置环境,第一步就是先要引入相应的js 和css 
需要引入的js:wow.js 
本案例中建议在头部引入这个js不然可能会出现页面先加载然后动画再出现的情况,这样显得动画是多余的哈哈哈, 
在head部分中加入 
当然也可以在头部引入animate.css 在最后引入wow.js

<head>
    <link rel="stylesheet" href="http://mynameismatthieu.com/WOW/css/libs/animate.css">
    <script src="http://mynameismatthieu.com/WOW/dist/wow.min.js"></script>
</head>
1
2
3
4
此处用了远程的引用 当然您也可以直接下载引用: 
wow.js官网 wow.js 
animate.css官网animate.css 
这样情况下其实还不能直接使用,因为wow.js还需要初始化的过程 
需要在animate.css以及wow.js引用之后加入让wow.js初始化的js代码

<script>new WOW().init();</script>
1
这样初始化就完成了,当需要添加动画时,只需要同时在需要添加动画的元素上增加wow这个样式以及animate.css里面有的动画样式

添加动画效果
<div class="wow bounceInUp" id="div1"></div>
1
这是最简单的引用方法,这样上面代码中的div1元素就会弹跳着进来,触发的时机是当在页面窗口即将被观察到的时候,也就是说,这个动画效果并不是在开始的时候就会表现(那样的话在屏幕外的动画效果是没有意义的)。在pc上表现为鼠标滚轮滚到这个元素的时候才会播放进入的动画,而手机上表现为当拉到这个元素的时候才会有动画。 
如果只添加一个wow的样式,那么这个元素在被滚到之前是隐形的,只有用户看到这的时候才会出现。 
当然就单纯有个开始的动画没有啥意思,有时候我们需要对动画出现的时间进行控制,或者是对动画进行循环播放,这个时候我们可以在元素里面添加wow.js才能解析的属性就行了

高级属性
data-wow-duration : 动画持续时间,时间越久动画越慢 例如 1s 
data-wow-delay : 延迟 时间越久动画越迟出现 例如 1s 
data-wow-offset :动画开始的距离,根据浏览器窗口底部框 当设置大的时候意味着动画更难出现 例如10意味着元素内容有10在浏览器中才会出现动画。默认值为0 
data-wow-iteration :动画重复次数 设为 infinite 时会持续不停重复 也可以设置整数

例子1

<div class="wow zoomIn" data-wow-duration="2s" data-wow-delay="0.5s"></div>
1
上面的这个元素动画会延迟0.5秒 缓慢地从中心点变大进入

例子2

<div class="wow pulse" data-wow-duration="1s" data-wow-iteration="infinite"></div>
1
上面这个例子的元素会不停地像心脏跳动一样 一秒跳一次不停地跳

通过改变这几个属性可以实现很多不同的效果 
效果名字可以查看animate.css 
选取自己喜需要的效果

自定义设置
在初始化wow的时候的自定义设置属性: 
boxClass:当元素没有与浏览器有任何重复的地方时 隐藏 所设置的元素 默认值是wow; 
animateClass:正在运行的时候的动画样式; 
offset:当元素与浏览器窗口有多少交叉的时候动画会出现,数值越大越难出现默认值是0,即有任何交叉就会出现; 
mobile:为手机端设置,因为手机设备的显示设备核心没有像电脑那么好,如果设为false则在手机端不显示动画效果 默认为true; 
live:默认为true 持续检查页面中是否有用于wow动画样式的元素 如果设为false那么在页面加载之后再用js添加的wow样式将不会有动画效果 默认值为true;

wow = new WOW(
         {
         boxClass:     'wow',      // default
         animateClass: 'animated', // default
         offset:       0,          // default
         mobile:       true,       // default
         live:         true        // default
       }
   )
   wow.init();
1
2
3
4
5
6
7
8
9
10
常见动画效果
fadeIn:渐现; 
bounceIn:弹跳进入; 
zoomIn:从小变大进入; 
rotateIn:旋转进入; 
slideInUp:滑动往上进入; 
。。。更多还是去animate.css里看吧

animate.css配合js也能做出很复杂的效果比如两种效果叠在一起的效果,而懒一点用wow.js的话可以用嵌套效果的方式同时实现两种效果
--------------------- 
作者:towrabbit 
来源:CSDN 
原文:https://blog.csdn.net/towrabbit/article/details/79995223 
版权声明:本文为博主原创文章,转载请附上博文链接!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值