使用wow.js和animate.css实现页面滚动动画效果

wow.js是一款结合了Animate.css，可以在页面向下滚动时，为页面中的元素加载动画的js。

项目地址：GitHub - graingert/WOW: Reveal CSS animation as you scroll down a page
CDN: Animate.css https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css
CDN: wow.js https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js

使用方法：

1、wow.js的使用必须依赖于上篇文章介绍的Animate.css，所以在使用前需要先引入Animate.css。

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

2、头部引用并激活wow.js。

<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>

3、给需要动画的页面元素添加wow和Animate类；其中wow是必须项，Animate效果类参考上一篇文章中的ClassName。

<div class="wow fadeInLeft"><img src="exp.jpg"/>
</div>

如果默认效果无法满足需求，可以通过使用高级类进行进一步的自定义；
data-wow-duration: 动画持续时间；
data-wow-delay: 动画开始前的延迟时间；
data-wow-offset: 激活动画的距离（相对于底部位置）；
data-wow-iteration: 动画的重复次数；

<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></section>
<section class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10"></section>

4、自定义设置

wow = new WOW(
{
boxClass:     'wow',      // 需要执行动画的元素的类名
animateClass: 'animated', // animation.css 动画类名
offset:       0,          // 设置滚动触发动画的距离（相对于底部）
mobile:       true,       // 是否在移动设备执行动画
live:         true        // 异步加载的内容持续检测
}
)
wow.init();

动画类名称如下：

Class Name
`bounce`	`flash`	`pulse`	`rubberBand`
`shake`	`headShake`	`swing`	`tada`
`wobble`	`jello`	`bounceIn`	`bounceInDown`
`bounceInLeft`	`bounceInRight`	`bounceInUp`	`bounceOut`
`bounceOutDown`	`bounceOutLeft`	`bounceOutRight`	`bounceOutUp`
`fadeIn`	`fadeInDown`	`fadeInDownBig`	`fadeInLeft`
`fadeInLeftBig`	`fadeInRight`	`fadeInRightBig`	`fadeInUp`
`fadeInUpBig`	`fadeOut`	`fadeOutDown`	`fadeOutDownBig`
`fadeOutLeft`	`fadeOutLeftBig`	`fadeOutRight`	`fadeOutRightBig`
`fadeOutUp`	`fadeOutUpBig`	`flipInX`	`flipInY`
`flipOutX`	`flipOutY`	`lightSpeedIn`	`lightSpeedOut`
`rotateIn`	`rotateInDownLeft`	`rotateInDownRight`	`rotateInUpLeft`
`rotateInUpRight`	`rotateOut`	`rotateOutDownLeft`	`rotateOutDownRight`
`rotateOutUpLeft`	`rotateOutUpRight`	`hinge`	`jackInTheBox`
`rollIn`	`rollOut`	`zoomIn`	`zoomInDown`
`zoomInLeft`	`zoomInRight`	`zoomInUp`	`zoomOut`
`zoomOutDown`	`zoomOutLeft`	`zoomOutRight`	`zoomOutUp`
`slideInDown`	`slideInLeft`	`slideInRight`	`slideInUp`
`slideOutDown`	`slideOutLeft`	`slideOutRight`	`slideOutUp`
`heartBeat`

除了使用默认的效果外，如果觉得不满意，还可以对效果进行自定义，比如设置效果延迟和速度；使用方法同样是在样式中添加对应的Delay Class 和Slow, Slower, Fast, and Faster Class。

<div class="animated bounce delay-2s">Example</div>
/* delay-2s 2s; delay-3s 3s; delay-4s 4s; delay-5s 5s */
<div class="animated bounce faster">Example</div>
/* slow 2s; slower 3s; fast 800ms; faster 500ms */

除了基本的调用方法外，还可以使用动态调用，通过给JS添加或删除class，可以实现动态效果：

<button id="btn1">添加</button>
<button id="btn2">移除</button>
<div id="box" class="box"></div>
<script>
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var oBox = document.getElementById('box');
oBtn1.onclick = function(){oBox.classList.add('animated');oBox.classList.add('flash');
}
oBtn2.onclick = function(){oBox.classList.remove('flash');
}
</script>

如果动画是无限播放的，可以添加 class infinite。

你也可以通过 JavaScript 或 jQuery 给元素添加这些 class，比如：

$(function(){$('#dowebok').addClass('animated bounce');
});

有些动画效果最后会让元素不可见，比如淡出、向左滑动等等，可能你又需要将 class 删除，比如：

$(function(){$('#dowebok').addClass('animated bounce');setTimeout(function(){$('#dowebok').removeClass('bounce');}, 1000);
});

animate.css 的默认设置也许有些时候并不是我们想要的，所以你可以重新设置，比如：

#dowebok {animate-duration: 2s;    //动画持续时间animate-delay: 1s;    //动画延迟时间animate-iteration-count: 2;    //动画执行次数
}

使用wow.js和animate.css实现页面滚动动画效果相关推荐

react基于WOW.js和Animate.css实现特定位置的动画执行
写在前面:对于css3动画小白的我,自己动手写动画确实很艰难,但是无意间了解到有相关库可以实现,为什么不用呢,嘿嘿(当然也在学css3啦) 文章目录效果展示官网文档实现步骤 1.下载WOW.js ...
【vue】用WOW.js+animate.css实现页面滚动加载元素动画
一.场景在很多的网站中,我们发现在滚动条滑动的时候一些元素显示出来的时候是有一些动画效果的,这样看起来页面更具有活力,增加用户体验.当然这些动画我们可以通过判断滚动条的位置或者判断元素距离可视窗口的 ...
wow.js结合animate.css实现滚动页面触发animate动画效果
animate.css http://www.swiper.com.cn/ wow.js https://wowjs.uk/docs.html https://github.com/graingert ...
【技术】nuxt中引入wow和animate.css随页面滚动出现动画
通过nodejs安装 cnpm install wowjs --save-dev 安装成功后:"package.json "wowjs": "^1.1.3&qu ...
基于Bootstrap和animate.css的模态框动画效果
最近在网上看到了可以对Bootstrap模态框增加打开和关闭的动画效果,故记录一下.原文地址点这里此动画效果需要引入animate.css,可以在animate.css官方网址中点击下载animat ...
解决Animate.css在谷歌浏览器没有动画效果
认真写好每一篇,愉悦自己,也方便他人真正官网地址:animate.css 百度好几个排第一的都不是官网 4.0版本后需要添加前缀animate__其它照旧 3.0版本演示文档传送门 win + R ...
【前端】使用wow.js这个插件（实现页面动画效果），提高前端开发效率。
1.简介有的页面在向下滚动的时候,有些元素会产生细小的动画效果.比如需要做到滚动条滑到某个位置时,才能显示动画. wow.js 依赖 animate.css,所以它支持 animate.css 多达 ...
50天50个前端小项目（纯html+css+js）第六天（页面滚动动画）
今天我们来实现的是页面滚动动画,比如说页面使用鼠标滚轮向下滚动的时候,内容区域会分别从左从右滑动到居中的内容区域,大概效果如下: 接下来来看实现首先是html: 没什么特别的地方,主要就是设置一些内 ...
js html页面切换效果,jQuery实现切换页面过渡动画效果
这篇文章主要介绍了关于jQuery实现切换页面过渡动画效果,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下这是一款效果非常酷的jQuery和CSS3通过AJAX调用切换页面过渡动画特效 ...

使用wow.js和animate.css实现页面滚动动画效果

使用wow.js和animate.css实现页面滚动动画效果相关推荐

最新文章

热门文章