HTML
1<div class="effect"> 2 <i class="fa fa-child fa-5x"></i> 3 <div> 4 <h2>Section2</h2> 5 <p>スクロールするとアイコンとテキスト順番に現れます</p> 6 </div> 7</div>
CSS
1.effect i { 2 height: 120px; 3 padding: 20px; 4 font-size: 100px; 5 transition: .8s; 6} 7.effect div { 8 margin: auto; 9 transition: .8s; 10 transition-delay: .8s; 11}
Jquery
1$(function(){ 2 $('.effect div, .effect i').css("opacity","0"); 3 $(window).scroll(function (){ 4 $(".effect").each(function(){ 5 var imgPos = $(this).offset().top; 6 var scroll = $(window).scrollTop(); 7 var windowHeight = $(window).height(); 8 if (scroll > imgPos - windowHeight + windowHeight/5){ 9 $("i, div",this).css("opacity","1" ); 10 $("i",this).css({ 11 "font-size": "100px", 12 "padding": "0 20px 40px" 13 }); 14 } else { 15 $("i, div",this).css("opacity","0" ); 16 $("i",this).css({ 17 "font-size": "20px", 18 "padding": "20px" 19 }); 20 } 21 }); 22 }); 23});
http://weboook.blog22.fc2.com/blog-entry-415.html>
こちらのサイトにある
if (scroll > imgPos - windowHeight + windowHeight/5){
の部分なのですが、なぜスクロールした量よりエフェクトの位置にウィンドウ6/5の高さを引いた数より
少なければ実行するのかがわかりません。
(windowHeight + windowHeight/5){
だけではダメなのでしょうか?
どなたかご教授願います。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。