window ase nim rip relative on() css html 滾動

主要是實現當頁面拉到當前部分時動畫才開始執行
//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%;} 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;} }

　　

視圖窗口動畫開始