每次看到那些加上各种动画的网页,就感觉逼格满满,一直没有机会去做这种页面效果,所以今天花了2个小时小小的尝试了一下,感觉很好玩哈,所以就封装了一个函数,方便以后用,喜欢的就拿去吧,嘿嘿~~~

先来看看效果吧:

css3控制元素依次进入

首先先看下计算在视窗之内的公式(这个公式同样适合做图片懒加载喔)

scrollTop < elementTop && (elementTop+itemHeight) < scrollTop+windowHeight //翻译成中文 滚动条的位置 < 元素的顶部 && 元素的底部(元素的顶部+元素的高度) < 滚动条位置+窗口的高度

相信上面的计算公式应该都能看的懂吧(很直白了)

下面是我封装的函数:

/** * 控制元素滚动到元素的位置,动画进入 * @param {需要加动画的元素}} element * @param {动画的类} animationClass * @param {偏移数} offset */ function controlAnimation(element,animationClass,offset){ var windowHeight = $(window).height(); var scrollTop = $(window).scrollTop(); animationClass = animationClass || 'active'; offset = offset || 100; element.each(function(index,el){ var $el = $(el); if (!$el.hasClass(animationClass)) { var itemTop = $el.offset().top; var itemBottom = itemTop+$el.height(); if (scrollTop <= itemTop && itemBottom-offset <= scrollTop+windowHeight) { $el.addClass(animationClass); } } }) }

现在来看看怎么用:

html结构

<div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7 </div>

css代码 动画是从animate.css复制过来的,大家可以直接引入animate.css动画库

body{ overflow-x: hidden; } .item{height: 300px;width:100%; margin-bottom:15px;background:#f54228;opacity: 0;font-size:40px;text-align: center;line-height: 300px;color: #fff;} .item.bounceInLeft{animation: bounceInLeft 1s;opacity: 1;} @keyframes bounceInLeft { from,60%,75%,90%,to {animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);} 0% {opacity: 0; transform: translate3d(-3000px, 0, 0);} 60% {opacity: 1; transform: translate3d(25px, 0, 0);} 75% {transform: translate3d(-10px, 0, 0);} 90% {transform: translate3d(5px, 0, 0);} to {transform: translate3d(0, 0, 0);} }

js代码

$(document).ready(function(){ controlAnimation($(".item"), 'bounceInLeft'); //首屏 $(window).scroll(function(){ //滚动监听 controlAnimation($(".item"), 'bounceInLeft') }) })