下記のコードはパララックス効果を使ったWEBサイトのサンプルです
スクロールしていけば隠れている画像が出てくるのですが問題があります
ディバイスによっては画像が出てきません
おそらくディバイスの画面サイズの大きさが違うためスクロール値が異なっているからだと思います
どうすれば解決しますか?
JavaScript
1<div id="contents"> 2 <img src = "img/Img1.jpg" id="mainImg1"> 3 <img src = "img/Img2.jpg" id="mainImg2"> 4 <img src = "img/Img3.jpg" id="mainImg3"> 5 <img src = "img/Img4.jpg" id="mainImg4"> 6 <img src = "img/Img5.jpg" id="mainImg5"> 7</div> 8<script> 9$(function(){ 10 $("#mainImg2").hide(); 11 $("#mainImg3").hide(); 12 $("#mainImg4").hide(); 13 $("#mainImg5").hide(); 14 $("#mainImg6").hide(); 15 16$(window).scroll(function(){ 17 var sy = $(this).scrollTop(); 18 19 20 // fadeIn判定 21 if(sy > 300) $("#mainImg2").fadeIn(); 22 if(sy > 1600) $("#mainImg3").fadeIn(); 23 if(sy > 3000) $("#mainImg4, #mainImg5").fadeIn(); 24 25 26});
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。