<p><span style="font-size:14px">关注“</span><span style="font-size:14px"><strong>青年码农</strong></span><span style="font-size:14px">”，回复“</span><strong><span style="font-size:14px">特效</span></strong><span style="font-size:14px">“</span></p><p><span style="font-size:14px">获取各种资料粒子特效、可视化等源码</span></p><blockquote><p>如果给向下滚动的页面增加一些细微的动画，这往往能给浏览者带来更好的体验，WOW.js就是这么一个能让用户眼前一亮的JavaScript库。</p></blockquote><p><span style="font-size:14px">WOW.js 依赖 animate.css，所以它支持 animate.css 多达 60 多种的动画效果，能满足您的各种需求。由于使用了CSS3动画，所以一些老旧的浏览器是不支持的。为了兼容，可以增加浏览器判断。</span></p>
<p><strong>使用方法</strong></p>
<p><strong><span style="font-size:14px">1. 引入文件-animate和<strong><span style="font-size:14px">WOW</span></strong></span></strong></p><span style="font-size:inherit"><<span style="font-size:inherit">link</span> <span style="font-size:inherit">rel</span>=<span style="font-size:inherit">"stylesheet"</span> <span style="font-size:inherit">href</span>=<span style="font-size:inherit">"css/animate.min.css"</span>></span>
<span style="font-size:inherit"><<span style="font-size:inherit">script</span> <span style="font-size:inherit">src</span>=<span style="font-size:inherit">"js/wow.min.js"</span>></span><span style="font-size:inherit"></span><span style="font-size:inherit"></<span style="font-size:inherit">script</span>></span>
<p><span style="font-size:14px">如果是npm包，直接可以用npm或者yarn安装依赖</span>
</p><span style="font-size:inherit">#</span><span style="font-size:inherit"><span style="font-size:inherit"> npm</span></span>
npm install wowjs
<span style="font-size:inherit">#</span><span style="font-size:inherit"><span style="font-size:inherit"> yarn</span></span>
yarn add wowjs
<p><strong><span style="font-size:14px">2. 初始化</span></strong></p><span style="font-size:inherit">new</span> WOW().init();
<p><span style="font-size:14px"></span><span style="font-size:14px">如果你想在初始化之前在修改一些配置，WOW也是支持的</span></p><span style="font-size:inherit">var</span> wow = <span style="font-size:inherit">new</span> WOW(
{
<span style="font-size:inherit">boxClass</span>: <span style="font-size:inherit">'wow'</span>, <span style="font-size:inherit">// 需要执行动画的元素的 class(默认是wow)</span>
animateClass: <span style="font-size:inherit">'animated'</span>, <span style="font-size:inherit">// animation.css 动画的 class(默认是animated)</span>
offset: <span style="font-size:inherit">0</span>, <span style="font-size:inherit">// 距离可视区域多少开始执行动画(默认为0)</span>
mobile: <span style="font-size:inherit">true</span>, <span style="font-size:inherit">// 是否在移动设备上执行动画(默认为true)</span>
live: <span style="font-size:inherit">true</span>, <span style="font-size:inherit">// 异步加载的内容是否有效(默认为true)</span>
callback: <span style="font-size:inherit"><span style="font-size:inherit">function</span> (<span style="font-size:inherit">box</span>) </span>{
<span style="font-size:inherit">// 每次动画启动时都会触发这个回调函数</span>
<span style="font-size:inherit">//传入的参数是动画DOM节点</span>
},
<span style="font-size:inherit">scrollContainer</span>: <span style="font-size:inherit">null</span> <span style="font-size:inherit">// 可选滚动容器选择器，否则使用窗口</span>
}
);
wow.init();
<p><strong><span style="font-size:14px">3. 给元素添加动画</span></strong>
</p><div <span style="font-size:inherit"><span style="font-size:inherit">class</span></span>=<span style="font-size:inherit">"wow slideInLeft"</span>><span style="font-size:inherit"></<span style="font-size:inherit">div</span>></span>
<div <span style="font-size:inherit"><span style="font-size:inherit">class</span></span>=<span style="font-size:inherit">"wow slideInRight"</span>><span style="font-size:inherit"></<span style="font-size:inherit">div</span>></span>
<p><span style="font-size:14px">注意：这里面的class名是 animate 3x版本及以下，如果你引用的是4x版本，4x版本默认class名</span><span style="font-size:14px">需要带前缀（默认为animate__）</span></p><div <span style="font-size:inherit"><span style="font-size:inherit">class</span></span>=<span style="font-size:inherit">"wow animate__slideInLeft"</span>><span style="font-size:inherit"></<span style="font-size:inherit">div</span>></span>
<div <span style="font-size:inherit"><span style="font-size:inherit">class</span></span>=<span style="font-size:inherit">"wow animate__slideInRight"</span>><span style="font-size:inherit"></<span style="font-size:inherit">div</span>></span>
<p><span style="font-size:14px">animate 也提供完全不带前缀的文件-<span style="font-size:14px">animate.compat.css</span>，和3x版本使用一样。</span>
</p><p><span style="font-size:14px">支持 animate.css 多达 60 多种的动画效果，同时还可以使用一些高级用法，如：</span></p><p><span style="font-size:14px">data-wow-duration（动画持续时间）</span></p><div <span style="font-size:inherit"><span style="font-size:inherit">class</span></span>=<span style="font-size:inherit">"wow slideInLeft"</span> data-wow-duration=<span style="font-size:inherit">"2s"</span>><span style="font-size:inherit"></<span style="font-size:inherit">div</span>></span>
<p><span style="font-size:14px">data-wow-delay（动画延迟时间）</span></p><div <span style="font-size:inherit"><span style="font-size:inherit">class</span></span>=<span style="font-size:inherit">"wow slideInLeft"</span> data-wow-delay=<span style="font-size:inherit">"5s"</span>><span style="font-size:inherit"></<span style="font-size:inherit">div</span>></span>
<p><span style="font-size:14px">data-wow-offset:距离开始动画(浏览器底部)</span></p><div <span style="font-size:inherit"><span style="font-size:inherit">class</span></span>=<span style="font-size:inherit">"wow slideInRight"</span> data-wow-offset=<span style="font-size:inherit">"10"</span>><span style="font-size:inherit"></<span style="font-size:inherit">div</span>></span>
<p><span style="font-size:14px">data-wow-iteration:动画重复的次数</span></p><div <span style="font-size:inherit"><span style="font-size:inherit">class</span></span>=<span style="font-size:inherit">"wow slideInRight"</span> data-wow-iteration=<span style="font-size:inherit">"10"</span>><span style="font-size:inherit"></<span style="font-size:inherit">div</span>></span>
<p><span style="font-size:14px">最后一个简单的demo送上</span></p><span style="font-size:inherit"><!DOCTYPE html></span>
<span style="font-size:inherit"><<span style="font-size:inherit">html</span> <span style="font-size:inherit">lang</span>=<span style="font-size:inherit">"zh-CN"</span>></span>
<span style="font-size:inherit"><<span style="font-size:inherit">head</span>></span>
<span style="font-size:inherit"><<span style="font-size:inherit">meta</span> <span style="font-size:inherit">charset</span>=<span style="font-size:inherit">"utf-8"</span>></span>
<span style="font-size:inherit"><<span style="font-size:inherit">link</span> <span style="font-size:inherit">href</span>=<span style="font-size:inherit">"https://cdn.bootcdn.net/ajax/libs/animate.css/3.7.2/animate.min.css"</span> <span style="font-size:inherit">rel</span>=<span style="font-size:inherit">"stylesheet"</span>></span>
<span style="font-size:inherit"><<span style="font-size:inherit">style</span>></span><span style="font-size:inherit">
<span style="font-size:inherit">.row</span> {
<span style="font-size:inherit">text-align</span>: center;
}
<span style="font-size:inherit">.row</span> <span style="font-size:inherit">div</span> {
<span style="font-size:inherit">padding</span>: <span style="font-size:inherit">20px</span>;
}
</span><span style="font-size:inherit"></<span style="font-size:inherit">style</span>></span>
<span style="font-size:inherit"></<span style="font-size:inherit">head</span>></span>
<span style="font-size:inherit"><<span style="font-size:inherit">body</span>></span>
<span style="font-size:inherit"><<span style="font-size:inherit">div</span> <span style="font-size:inherit">class</span>=<span style="font-size:inherit">"dowebok"</span>></span>
<span style="font-size:inherit"><<span style="font-size:inherit">div</span> <span style="font-size:inherit">style</span>=<span style="font-size:inherit">"height:100vh;"</span>></span><span style="font-size:inherit"></<span style="font-size:inherit">div</span>></span>
<span style="font-size:inherit"><<span style="font-size:inherit">div</span> <span style="font-size:inherit">class</span>=<span style="font-size:inherit">"row"</span>></span>
<span style="font-size:inherit"><<span style="font-size:inherit">div</span> <span style="font-size:inherit">class</span>=<span style="font-size:inherit">"wow rollIn"</span>></span>左边进入<span style="font-size:inherit"></<span style="font-size:inherit">div</span>></span>
<span style="font-size:inherit"><<span style="font-size:inherit">div</span> <span style="font-size:inherit">data-wow-offset</span>=<span style="font-size:inherit">"10"</span> <span style="font-size:inherit">data-wow-iteration</span>=<span style="font-size:inherit">"10"</span> <span style="font-size:inherit">class</span>=<span style="font-size:inherit">"wow bounceInDown"</span>></span>WOW.js<span style="font-size:inherit"></<span style="font-size:inherit">div</span>></span>
<span style="font-size:inherit"><<span style="font-size:inherit">div</span> <span style="font-size:inherit">data-wow-duration</span>=<span style="font-size:inherit">"2s"</span> <span style="font-size:inherit">data-wow-delay</span>=<span style="font-size:inherit">"5s"</span> <span style="font-size:inherit">class</span>=<span style="font-size:inherit">"wow lightSpeedIn"</span>></span>右边进入<span style="font-size:inherit"></<span style="font-size:inherit">div</span>></span>
<span style="font-size:inherit"></<span style="font-size:inherit">div</span>></span>
<span style="font-size:inherit"><<span style="font-size:inherit">div</span> <span style="font-size:inherit">style</span>=<span style="font-size:inherit">"height:100vh;"</span>></span><span style="font-size:inherit"></<span style="font-size:inherit">div</span>></span>
<span style="font-size:inherit"></<span style="font-size:inherit">div</span>></span>
<span style="font-size:inherit"><<span style="font-size:inherit">script</span> <span style="font-size:inherit">src</span>=<span style="font-size:inherit">"http://cdn.dowebok.com/131/js/wow.min.js"</span>></span><span style="font-size:inherit"></span><span style="font-size:inherit"></<span style="font-size:inherit">script</span>></span>
<span style="font-size:inherit"><<span style="font-size:inherit">script</span>></span><span style="font-size:inherit">
<span style="font-size:inherit">new</span> WOW().init();
</span><span style="font-size:inherit"></<span style="font-size:inherit">script</span>></span>
<span style="font-size:inherit"></<span style="font-size:inherit">body</span>></span>
<span style="font-size:inherit"></<span style="font-size:inherit">html</span>></span>
<p>
</p><p><span style="font-size:14px"><strong>来都来了，点个在看再走吧~~~</strong></span></p>
网友评论