一、第一种(适用大量动画)
实际工作中如果一个页面需要大量的动画上面写法就很累人了,但我们可以用wow.js和animate.css动画库配合来实现需要的动画效果。wow.js下载地址http://www.dowebok.com/131.html,animate.css下载地址https://daneden.github.io/animate.css/
使用方法分别引入animate.css和wow.js然后在html中加上 class="wow slideInLeft" 第二个class可以自已更改.
HTML
<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div> <div class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10"></div>
wow
是必须要添加的slideInLeft
说明了动画的样式,是从左边滑动出来的。更多动画样式可以再这个网址https://daneden.github.io/animate.css/查看。
js
new一下调用一下方法就完成了动画效果的附加
new WOW().init();
哪里需要动画只需要在哪里的class里面写上wow slideInLeft 就好了。
如果需要自定义配置,可如下使用:
var wow = new WOW({ boxClass: 'wow', animateClass: 'animated', offset: 0, mobile: true, live: true }); wow.init();
二、第二种用法:(适用少量动画)
惰性加载图片:
<ul> <li class='lazy'><img data-original='images/0.jpg' src='images/loading.gif'/></li> <li class='lazy'><img data-original='images/1.jpg' src='images/loading.gif'/></li> <li class='lazy'><img data-original='images/2.jpg' src='images/loading.gif'/></li> <li class='lazy'><img data-original='images/3.jpg' src='images/loading.gif'/></li> <li class='lazy'><img data-original='images/4.jpg' src='images/loading.gif'/></li> <li class='lazy'><img data-original='images/5.jpg' src='images/loading.gif'/></li> <li class='lazy'><img data-original='images/6.jpg' src='images/loading.gif'/></li> <li class='lazy'><img data-original='images/7.jpg' src='images/loading.gif'/></li> <li class='lazy'><img data-original='images/8.jpg' src='images/loading.gif'/></li> <li class='lazy'><img data-original='images/9.jpg' src='images/loading.gif'/></li> <li class='lazy'><img data-original='images/10.jpg' src='images/loading.gif'/></li> <li class='lazy'><img data-original='images/11.jpg' src='images/loading.gif'/></li> <li class='lazy'><img data-original='images/12.jpg' src='images/loading.gif'/></li> </ul>
js:
<script type="text/javascript"> // 图片惰性加载 init(); function init() { var images = document.images; // 加载首屏图片 for (var i = 0, len = images.length; i < len; i++) { var obj = images[i]; // 如果在可视区域并且还没被加载过 if(obj.getBoundingClientRect().top < document.documentElement.clientHeight && !obj.isLoad) { obj.isLoad = true; // 先调用 HTML5 方法 if (obj.dataset) imageLoaded(obj, obj.dataset.original); else imageLoaded(obj, obj.getAttribute('data-original')); } else { break; } } } window.onscroll = function() { lazyload(); }; function lazyload() { var lazy = 500; var images = document.images; for (var i = 0, len = images.length; i < len; i++) { var obj = images[i]; if (obj.getBoundingClientRect().top - lazy < document.documentElement.clientHeight && !obj.isLoad) { obj.isLoad = true; obj.style.cssText = "transition: ''; opacity: 0;transform: translateY(-16px) translateX(16px);"
if (obj.dataset) imageLoaded(obj, obj.dataset.original); else imageLoaded(obj, obj.getAttribute('data-original')); } if (obj.getBoundingClientRect().top < document.documentElement.clientHeight && !obj.isShow) { obj.isShow = true; obj.style.cssText = "transition: 1s; opacity: 1;transform: translateY(0) translateX(0);"
} } } function imageLoaded(obj, src) { var img = new Image(); img.onload = function() { obj.src = src; }; img.src = src; } </script>