【自己的整理】页面滚动时触发动画特效 wow.js + Animate.css

最新推荐文章于 2024-10-10 23:52:19 发布

towrabbit

最新推荐文章于 2024-10-10 23:52:19 发布

阅读量3.2k

点赞数 2

分类专栏：前端文章标签： css动画 animate.css wow.js 页面动画

本文链接：https://blog.csdn.net/towrabbit/article/details/79995223

版权

前端专栏收录该内容

37 篇文章 2 订阅

订阅专栏

在页面添加初始动画特效

在页面添加初始动画特效的时候无意接触到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>

此处用了远程的引用当然您也可以直接下载引用：
wow.js官网 wow.js
animate.css官网animate.css
这样情况下其实还不能直接使用，因为wow.js还需要初始化的过程
需要在animate.css以及wow.js引用之后加入让wow.js初始化的js代码

<script>new WOW().init();</script>

这样初始化就完成了，当需要添加动画时，只需要同时在需要添加动画的元素上增加wow这个样式以及animate.css里面有的动画样式

添加动画效果

<div class="wow bounceInUp" id="div1"></div>

这是最简单的引用方法，这样上面代码中的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>

上面的这个元素动画会延迟0.5秒缓慢地从中心点变大进入

例子2

<div class="wow pulse" data-wow-duration="1s" data-wow-iteration="infinite"></div>

上面这个例子的元素会不停地像心脏跳动一样一秒跳一次不停地跳

通过改变这几个属性可以实现很多不同的效果
效果名字可以查看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();