初心者です。
よろしくお願いします。
下記のJavascriptについて
もっと効率よくて簡単で洗練された書き方、
プロならこう書くべきという
お手本を教えていただけませんでしょうか。
下記のように
HTMLでは#divWrapp の背景に暗めの画像が敷かれており
その上にimgタグで明るめの画像を重ねてあります。
imgタグの画像(明るめの画像)はページ表示時は透明状態で、
背景の暗めの画像が表示されている状態です。#divWrapp2も同様です。#divWrapp、#divWrapp2がが縦に並んでいます。
ページをスクロールして、#divWrappが画面中央に来ると
imgタグの画像(明るめの画像)の透明度が0.8になり、
暗い画像から明るい画像へとアニメーションして見えるようにしています。
簡単なパララックス風のページの一部です。
よろしくお願いします。
html
1<div id="divWrapp"> 2 <img src="" class="mainImg"> 3</div> 4 5<div id="divWrapp2"> 6 <img src="" class="mainImg"> 7</div>
Javascript
1//上部のdiv 2$(function () { 3 $(window).scroll(function () { 4 function ImgLightFunc() { 5 $('#divWrapp .mainImg').stop().animate({ 6 "opacity": "0.8" 7 }, { 8 "duration": "1500" 9 }); 10 } 11 12 function ImgDarkFunc() { 13 $('#divWrapp .mainImg').stop().animate({ 14 "opacity": "0" 15 }, { 16 "duration": "1500" 17 }); 18 } 19 20 var obj_t_pos = $('#divWrapp').offset().top; 21 var scr_count = $(document).scrollTop() + (window.innerHeight / 2); //ディスプレイの半分の高さ 22 23 if (scr_count > obj_t_pos) { 24 ImgLightFunc(); 25 } else { 26 ImgDarkFunc(); 27 } 28 29 }); 30}); 31 32 33//下部のdiv 34$(function () { 35 $(window).scroll(function () { 36 function ImgLightFunc2() { 37 $('#divWrapp2 .mainImg').stop().animate({ 38 "opacity": "0.8" 39 }, { 40 "duration": "1500" 41 }); 42 }; 43 44 function ImgDarkFunc2() { 45 $('#divWrapp2 .mainImg').stop().animate({ 46 "opacity": "0" 47 }, { 48 "duration": "1500" 49 }); 50 } 51 52 var obj_t_pos = $('#divWrapp2').offset().top; 53 var scr_count = $(document).scrollTop() + (window.innerHeight / 2); //ディスプレイの半分の高さ 54 55 if (scr_count > obj_t_pos) { 56 ImgLightFunc2(); 57 } else { 58 ImgDarkFunc2(); 59 } 60 61 }); 62});
回答2件
あなたの回答
tips
プレビュー