jquery スクロールするとフェードインする手法を行おうとしましたが、上手くいきませんでした。
問題点はスクロールすると全ての画像が同時に表示されてしまう事です。
コードは下記です。
html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <link href="css/style.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVU="crossorigin="anonymous"></script> <script src="js/scroll.js"></script> </head> <body> <div class="wrapper"> <div class="box red"> <img src="img/s1.jpg" alt=""> <p>block1</p> </div> <div class="box blue"> <img src="img/s2.jpg" alt=""> <p>block2</p> </div> <div class="box yel"> <img src="img/s3.jpg" alt=""> <p>block3</p> </div> <div class="box grn"> <img src="img/s4.jpg" alt=""> <p>block4</p> </div> </div> </body> </html>
css
@charset utf-8; .wrapper { width: 900px; margin: 0 auto; } .box { text-align: center; padding: 100px 0; } .box img { width: 300px; } .red { background-color: red; } .blue { background-color: blue; } .yel { background-color: yellow ; } .grn { background-color: green; }
js
$(function(){ var boxcss = { visibility:"hidden", opacity:"0" }; $(".box img").css(boxcss); //on(イベント)後から追加したdomも取得する。また複数イベントを設定できる。 //.each(function(){ここの中で繰り返し} $(window).on("scroll", function(){ $(".box img").each(function(){ var imgPos = $(this).offset().top; //window上から.boxまでの距離 var scroll = $(window).scrollTop();//スクロールした分量 var windowHeight = $(window).height();//windowの高さ if(scroll > imgPos - windowHeight + windowHeight / 5){ $(".box img").css("visibility","visible") $(".box img").animate({opacity:1},500); } }); }); });