可視範囲に入ってから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; } }