经过前面的总结,用wow.js做了一个案例demo
里面的具体效果我已经标明
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <link rel="stylesheet" href="css/animate.css"> <style type="text/css"> .row { font-size: 0; text-align: center; } .wow { display: inline-block; width: 280px; height: 280px; margin: 30px 15px 0; border-radius: 50%; font: 30px/280px "Microsoft Yahei"; vertical-align: top; *display: inline; zoom: 1; } .bg-green { background: #5bd5a0; } .bg-blue { background: #1daee9; } .bg-purple { background: #c843a5; } .bg-red { background: #eb3980; } .bg-yellow { background: #ffcc35; } *{ margin: 0; padding: 0; } </style> </head> <body style="overflow-x: hidden"> <div style="width: 100%;margin: 150px auto;text-align: center">滚动屏幕动画效果</div> <div> <div class="row"> <!--<div class="wow rollIn bg-blue">从左到右滚动</div>--> <div class="wow swing bg-purple" data-wow-iteration="2">左右摇摆</div> <div class="wow pulse bg-red" data-wow-iteration="5" data-wow-duration="0.15s">放大缩小复原</div> <div class="wow lightSpeedIn bg-purple">水滴变形滚动</div> </div> <div class="row"> <div class="wow bounce bg-green">上下弹性抖动</div> <div class="wow shake bg-green">左右弹性抖动</div> <div class="wow wobble bg-red">不倒翁左右晃</div> </div> <div class="row"> <div class="wow bounceInDown bg-green">从上往下掉落</div> <div class="wow bounceInUp bg-blue">从下往上掉落</div> <div class="wow bounceInLeft bg-purple">从左往右掉落</div> <div class="wow bounceInRight bg-blue">从右往左掉落</div> </div> <div class="row"> <div class="wow slideInDown bg-green">从上往下发射</div> <div class="wow slideInUp bg-blue">从下往上发射</div> <div class="wow slideInLeft bg-purple">从左往右发射</div> <div class="wow slideInRight bg-blue">从右往左发射</div> </div> <div class="row"> <div class="wow flipInX bg-blue">后仰前栽</div> <div class="wow flipInY bg-blue">左右前栽</div> </div> <div class="row"> <div class="wow rollIn bg-red">从左到右滚动</div> <div class="wow bounceInUp bg-yellow" data-wow-delay="0.5s">从下往上掉落</div> <div class="wow lightSpeedIn bg-green" data-wow-delay="0.5s" data-wow-duration="1s">水滴变形滚动</div> </div> </div> <script src="http://cdn.dowebok.com/131/js/wow.min.js"></script> <script> // wow = new WOW({ // animateClass: 'animated', // }); // wow.init(); if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){ new WOW().init(); }; </script> </body> </html>
.
相关推荐
Wow.js是javascript动画插件,经常配合animate.css一起使用。动画效果会在元素第一次出现在页面中时起作用。 引入wow.js 在需要使用的元素上添加class=”wow” 使用js初始化
css动画效果 wow插件需要的wow.min.js和animate.css
WOW.js 改良版 之前版本只有下拉才会触发加载效果 支持上下滑动触发效果
wow.js使用和动画只执行一次问题优化
wow.min.js,wow.js
Wow.js是javascript动画插件,经常配合animate.css一起使用。动画效果会在元素第一次出现在页面中时起作用。 引入wow.js 在需要使用的元素上添加class=”wow” 使用js初始化
WOW.js(可视区域展示动画):http://blog.csdn.net/libin_1/article/details/52200659
WOW.js 改良版 之前版本只有下拉才会触发加载效果 支持上下滑动触发效果。
wow.js结合animated.css使用,页面添加动画,给网站增加活跃性
WOW.js是一款效果炫酷的元素在页面滚动时展示CSS3动画的JS插件。默认wow.js使用animate.css作为动画库,但是你可以通过设置来使用你喜欢的动画库。
Wow.js插件,可用于响应式页面的开发,需配合animate.css使用
<div class="wow bounceInDown bg-green">WOW.js <div class="wow lightSpeedIn bg-purple"> <div class="wow rollIn bg-yellow" data-wow-delay="0.5s">简单易用 <div class="wow pulse bg-red" data-wow-...
wow.js是一个JavaScript库,用于制作网站上的滚动动画效果。它可以帮助您为网站添加动态和视觉吸引力,并使用户在滚动时感到更加舒适和流畅。 wow.js内置了许多不同类型的动画效果,例如淡入、弹跳、旋转、滑动等,...
由小码农整理分享 网址:https://www.code-elf.cn/ 有的页面在上下滚动的时候,有些元素会产生细小的动画效果。虽然动画比较小,但却能吸引你的注意。
wow.js 动态效果插件
本插件是基于JavaScript的web前端开发动画加载插件,结合animate.css共同使用,实现前端页面完美的动画效果
wow.js文件的静态资源
和 WOW.js 一样,scrollReveal.js 也是一款页面滚动显示动画的 JavaScript,能让页面更加有趣,更吸引用户眼球。不同的是 WOW.js 的动画只播放一次,而 scrollReveal.js 的动画可以播放一次或无限次;WOW.js 依赖 ...