読者です 読者をやめる 読者になる 読者になる

可視範囲に入ってからli要素の表示を、要素の順番ごとに少しずつずらす方法

今回は可視範囲の判定をjsでして、可視範囲に入った時にactiveというクラスを付けました。
目的はdisplay:inline-block;で並べている画像を要素の順番ごとに送らせて表示させることで、その設定はcssのanimation機能を使用しました。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/animate.css">
	<script src="js/main.js"></script>
	<script>	
$(function(){

$('ul.list-item > li').css("opacity","0");

$(window).scroll(function (){

  $("ul.list-item > li").each(function(){

    var imgPos = $(this).offset().top;   

    var scroll = $(window).scrollTop();

    var windowHeight = $(window).height();

    if (scroll > imgPos - windowHeight + windowHeight/5){

      $(this).addClass('active');}
       else {

      $(this).removeClass('active').css('opacity','0');
}

  });

});

});
</script>
</head>
<body>
<div class="container">
<h1><img src="img/main_ttl.jpg" alt=""></h1>
<ul class="style">
<li>
	<div class="image"><img src="img/styling01.jpg" alt=""></div><!-- .image -->
	<div class="list-wrap">
		<ul class="list-item">
		<li>
			<a><img src="img/itemC1212021_090p1M.jpg" alt=""></a>
		</li>
		<li>
			<a><img src="img/itemC1212021_090p1M.jpg" alt=""></a>
		</li>
		<li>
			<a><img src="img/itemC1212021_090p1M.jpg" alt=""></a>
		</li>
		<li>
			<a><img src="img/itemC1212021_090p1M.jpg" alt=""></a>
		</li>
		<li>
			<a><img src="img/itemC1212021_090p1M.jpg" alt=""></a>
		</li>
		<li>
			<a><img src="img/itemC1212021_090p1M.jpg" alt=""></a>
		</li>
	</ul>
	</div><!-- .listwrap -->
</li>
<li>
	<div class="image"><img src="img/styling01.jpg" alt=""></div><!-- .image -->
	<div class="list-wrap">
		<ul class="list-item">
		<li>
			<a><img src="img/itemC1212021_090p1M.jpg" alt=""></a>
		</li>
		<li>
			<a><img src="img/itemC1212021_090p1M.jpg" alt=""></a>
		</li>
		<li>
			<a><img src="img/itemC1212021_090p1M.jpg" alt=""></a>
		</li>
		<li>
			<a><img src="img/itemC1212021_090p1M.jpg" alt=""></a>
		</li>
		<li>
			<a><img src="img/itemC1212021_090p1M.jpg" alt=""></a>
		</li>
		<li>
			<a><img src="img/itemC1212021_090p1M.jpg" alt=""></a>
		</li>
	</ul>
	</div><!-- .listwrap -->
</li>
<li>
	<div class="image"><img src="img/styling01.jpg" alt=""></div><!-- .image -->
	<div class="list-wrap">
		<ul class="list-item">
		<li>
			<a><img src="img/itemC1212021_090p1M.jpg" alt=""></a>
		</li>
		<li>
			<a><img src="img/itemC1212021_090p1M.jpg" alt=""></a>
		</li>
		<li>
			<a><img src="img/itemC1212021_090p1M.jpg" alt=""></a>
		</li>
		<li>
			<a><img src="img/itemC1212021_090p1M.jpg" alt=""></a>
		</li>
		<li>
			<a><img src="img/itemC1212021_090p1M.jpg" alt=""></a>
		</li>
		<li>
			<a><img src="img/itemC1212021_090p1M.jpg" alt=""></a>
		</li>
	</ul>
	</div><!-- .listwrap -->
</li>


</ul><!-- .style -->
</div>
	
</body>
</html>


レイアウト用css

@charset "utf-8";
/* CSS Document */
*{margin:0;
padding:0}
li{list-style:none;}
.container{text-align: :center;
	width: 1270px;
	height: auto;
	margin: 0 auto 80px;
}
.container h1 img{width:100%;}



.container .style{overflow: hidden;}
.container .style img{width:100%;}
.container .style>li{height:700px;}
.container .style  li>.image{float:left;
width:500px;}

.container .style .list-wrap{width:700px;
float:right;}

.container .style .list-wrap ul.list-item{width:100%;
letter-spacing: -0.40em;}
.container .style .list-wrap ul.list-item li{display:inline-block;
	letter-spacing: :normal;
width:30%;
margin:50px 1.515%;}

 


animation用css

@charset "utf-8";
/* CSS Document */

.list-item>li.active:nth-child(1) {
  -webkit-animation: example 0.5s ease-in-out 0.5s 1 forwards;
  animation: example 0.5s ease-in-out 0.5s 1 forwards;
}
.list-item>li.active:nth-child(2) {
  -webkit-animation: example 0.5s ease-in-out 0.8s 1 forwards;
  animation: example 0.5s ease-in-out 0.8s 1 forwards;
}
.list-item>li.active:nth-child(3) {
  -webkit-animation: example 0.5s ease-in-out 1.1s 1 forwards;
  animation: example 0.5s ease 1.1s 1 forwards;
}

.list-item>li.active:nth-child(4) {
  -webkit-animation: example 0.5s ease-in-out 0.5s 1 forwards;
  animation: example 0.5s ease-in-out 0.5s 1 forwards;
}
.list-item>li.active:nth-child(5) {
  -webkit-animation: example 0.5s ease-in-out 0.8s 1 forwards;
  animation: example 0.5s ease-in-out 0.8s 1 forwards;
}
.list-item>li.active:nth-child(6) {
  -webkit-animation: example 0.5s ease-in-out 1.1s 1 forwards;
  animation: example 0.5s ease 1.1s 1 forwards;
}




@-webkit-keyframes example {
  100% {
    opacity: 1;
  }
}