滚动加载动画
日期： 2018-09-29 分类： 个人收藏 380次阅读
自封装插件 :
<script>
/***
* 使用方法:
* 调用方法时,后边的效果会覆盖前面的,所以只需要调用一次即可
* 此方法全局只执行一次,只有定义了animated类名的才能使用此方法
* <div class="animated bt"></div> /可以使用
* <div class="bt"></div> /不可以使用
* <div class="animated"></div> /若调用第一个参数也是 animated 则也可以使用
*/
ani("bt","flipInX");
function ani(type1,type2){
$(window).scroll(function(){
//获取需要做动画的类的个数
var len = $("."+type1).length;
for(var i= 0;i<len;i++){
//元素本身距顶部的高度
var elementTop = $("."+type1).eq(i).offset().top;
//获取body内容的滚动条距顶部的高度
var bodyTop = $(window).scrollTop();
//获取浏览器窗口显示高度
var windowTop = $(window).height()-100;
//当元素距顶部的高度 减去 滚动条移动的高度 小于 浏览器窗口的高度是 就说明元素显示出来了
if((elementTop-bodyTop)<windowTop){
//给当前元素添加一个动画效果
$("."+type1).eq(i).addClass(type2);
}
}
});
}
</script>demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>滚动到指定高度执行动画</title>
<style>
</style>
<link rel="stylesheet" href="css/animate.min.css" />
</head>
<body>
<!--定义外部查找的元素容器-->
<div class="a1">
<!--给需要做动画效果的元素加上 animated 类名-->
<li style="width:500px;height:500px;background:red;" ></li>
</div>
<div class="a2" >
<li style="width:500px;height:500px;background:yellow;" class="animated"></li>
</div>
<div class="a3">
<li style="width:500px;height:500px;background:green;" class="animated"></li>
</div>
<div class="a4">
<li style="width:500px;height:500px;background:skyblue;" class="animated"></li>
</div>
<div class="a5">
<li style="width:500px;height:500px;background:blue;" class="animated"></li>
</div>
</body>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script>
//当滚动条滚动的时候执行以下方法
$(window).scroll(function(){
ani("a1","rubberBand");
ani("a2","rubberBand");
ani("a3","rubberBand");
ani("a4","rubberBand");
ani("a5","rubberBand");
});
function ani(claname,type1){
/*
* 元素距顶部的高度 : $("."+claname).offset().top
* 滚动条距顶部的高度 : $(window).scrollTop()
* 页面的显示高度 : $(window).height()
* */
if(($("."+claname).offset().top - $(window).scrollTop())<$(window).height()-200){
//当元素距顶部的高度 减去 滚动条距顶部的高度 小于页面的显示高度时就代表这个元素已经在页面上显示出来了
//这时给元素添加一个动画效果
$("."+claname).find("li").addClass(type1);
}else{
//反之则删除元素的动画效果(当然没有添加的执行此方法也删除不掉 不做操作)
$("."+claname).find("li").removeClass(type1);
}
}
</script>
</body>
</html>插件原地址: http://www.jq22.com/jquery-info14481
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{padding: 0;margin: 0;}
li{list-style: none;}
ul{width:1000px;margin: 0 auto;}
ul li{width: 490px;margin-top: 10px;}
ul li:nth-child(odd){
float: left;
}
ul li:nth-child(even){
float: right;
}
ul li img{width: 100%;}
ul:after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}
</style>
<link rel="stylesheet" href="css/animate.min.css" />
</head>
<body>
<ul>
<li class="animated"><img src="img/a1.png"></li>
<li class="animated"><img src="img/a2.png"></li>
</ul>
<ul class="one">
<li class="animated"><img src="img/a3.png"></li>
<li class="animated"><img src="img/a4.png"></li>
</ul>
<ul class="two">
<li class="animated"><img src="img/a1.png"></li>
<li class="animated"><img src="img/a2.png"></li>
</ul>
<ul class="thr">
<li class="animated"><img src="img/a3.png"></li>
<li class="animated"><img src="img/a4.png"></li>
</ul>
<ul class="for">
<li class="animated"><img src="img/a1.png"></li>
<li class="animated"><img src="img/a2.png"></li>
</ul>
<ul class="fiv">
<li class="animated"><img src="img/a3.png"></li>
<li class="animated"><img src="img/a4.png"></li>
</ul>
<ul class="a1">
<li class="animated"><img src="img/a1.png"></li>
<li class="animated"><img src="img/a2.png"></li>
</ul>
<ul class="a2">
<li class="animated"><img src="img/a3.png"></li>
<li class="animated"><img src="img/a4.png"></li>
</ul>
<ul class="a3">
<li class="animated"><img src="img/a1.png"></li>
<li class="animated"><img src="img/a2.png"></li>
</ul>
<ul class="a4">
<li class="animated"><img src="img/a3.png"></li>
<li class="animated"><img src="img/a4.png"></li>
</ul>
</body>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script>
function ani(claname,type1,type2){
if(($("."+claname).offset().top - $(window).scrollTop())<$(window).height()){
$("."+claname).find("li").eq(0).addClass(type1);
$("."+claname).find("li").eq(1).addClass(type2);
};
$(window).scroll(function(){
if(($("."+claname).offset().top - $(window).scrollTop())<$(window).height()){
$("."+claname).find("li").eq(0).addClass(type1);
$("."+claname).find("li").eq(1).addClass(type2);
};
});
};
ani("one","bounceInLeft","bounceInRight");
ani("two","bounceIn","bounceIn");
ani("thr","fadeInDownBig","fadeInDownBig");
ani("for","bounceInUp","bounceInUp");
ani("fiv","rotateInDownLeft","rotateInDownRight");
ani("a1","zoomInLeft","zoomInRight");
ani("a2","bounceInUp","bounceInUp");
ani("a3","rotateInDownLeft","rotateInDownRight");
ani("a4","zoomInLeft","zoomInRight");
</script>
</html>
除特别声明，本站所有文章均为原创，如需转载请以超级链接形式注明出处：SmartCat's Blog
标签：css Jquery
下一篇： Git Hub
精华推荐