视图窗口动画开始

主要是实现当页面拉到当前部分时动画才开始执行
//html 页面代码
<div class="tuiguang">
	<img src="images/tuiguang-logo.jpg" alt="">
	<img src="images/tuiguang-logo1.jpg" alt="">
	<img src="images/tuiguang-logo2.jpg" alt="">
	<img src="images/tuiguang-logo3.jpg" alt="">
</div>
<script>
	 $(function(){
	  var t1 = $(".tuiguang").offset().top;//当前div距页面顶部的距离
	  $(window).scroll(function(){//滚动条移动事件
	  var top = $(document).scrollTop();//滚动条距页面顶部的距离
	  if(top >= t1-400){
	  $(".tuiguang img:nth-child(2)").addClass("on");
	  $(".tuiguang img:nth-child(3)").addClass("on");
	             $(".tuiguang img:nth-child(4)").addClass("on");
	          }
	               
	      });
	  });
</script>

// css 部分代码
.tuiguang img{width:100%;}
.tuiguang img:nth-child(1){position:relative;top:0;}
.tuiguang img:nth-child(2){position:relative;left:100%;}
.tuiguang img:nth-child(2).on{animation:dongHua1 1s ease-in both;}
@keyframes dongHua1{
    from{left:-100%;}
    to{left:0px;}
}
.tuiguang img:nth-child(3){position:relative;left:100%;}
.tuiguang img:nth-child(3).on{animation:dongHua2 1s ease-in both;animation-delay:1s;}
@keyframes dongHua2{
    from{left:100%;}
    to{left:0px;}
}
.tuiguang img:nth-child(4){position:relative;left:100%;}
.tuiguang img:nth-child(4).on{animation:dongHua3 1s ease-in both;animation-delay:2s;}
@keyframes dongHua3{
    from{left:-100%;}
    to{left:0px;}
}

 

　　

转载于:https://www.cnblogs.com/lzq035/p/7966726.html