视图窗口动画开始

Posted 2020-10-16 M.Ling

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了视图窗口动画开始相关的知识，希望对你有一定的参考价值。

主要是实现当页面拉到当前部分时动画才开始执行
//html 页面代码
<div class="tuiguang">
	<img src="images/tuiguang-logo.jpg" >
	<img src="images/tuiguang-logo1.jpg" >
	<img src="images/tuiguang-logo2.jpg" >
	<img src="images/tuiguang-logo3.jpg" >
</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%;}