画面の中央までスクロールすると
色が変わる画像、その下には同サイズ内で
画像が拡大されるものがあります。
画像が拡大されるほうは
画面中央までスクロールしても
拡大されるまで時間がかかり、
勝手に縮小したりしてしまいます。
何が原因なのでしょうか。
教えていただけませんか。
HTML
1 2<div id="divWrapp"> 3 <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/732318/01.jpg" class="mainImg"> 4</div> 5 6<div id="divWrapp2"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/732318/02.jpg" alt="" class="mainImg"/></div> 7
css
1 2**body**{ 3 height: 3000px; 4} 5**#divWrapp**{ 6 width: 500px; 7 height:350px; 8 margin: 900px auto 0; 9 background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/732318/01_off.jpg") no-repeat; 10} 11**#divWrapp .mainImg**{ 12 opacity: 0; 13} 14 15**#divWrapp2**{ 16 width: 350px; 17 height:233px; 18 margin: 900px auto 0; 19 overflow:hidden; 20} 21**#divWrapp2 .mainImg**{ 22 opacity:1; 23 width: 350px; 24 height:233px; 25} 26 27
javascript
1//上部のdiv 2$(function(){ 3 $(window).scroll(function(){ 4 5 function ImgLightFunc(){ 6 $('#divWrapp .mainImg').stop().animate({"opacity":"1"},{"duration":"1500"}); 7 } 8 function ImgDarkFunc(){ 9 $('#divWrapp .mainImg').stop().animate({"opacity":"0"},{"duration":"1500"}); 10 } 11 12var obj_t_pos = $('#divWrapp').offset().top; 13var scr_count = $(document).scrollTop()+(window.innerHeight/2); //ディスプレイの半分の高さ 14 15if(scr_count > obj_t_pos){ 16 ImgLightFunc(); 17 }else{ 18 ImgDarkFunc(); 19} 20 21}); 22}); 23 24 25//下部のdiv 26$(function(){ 27 $(window).scroll(function(){ 28 function ImgLargeFunc(){ 29 $('#divWrapp2 .mainImg').animate({ 30 "width":"385px", 31 "height":"256px"},{"duration":"1500"}); 32}; 33 function ImgSmallFunc(){ 34 $('#divWrapp2 .mainImg').stop().animate({ 35 "width":"350px", 36 "height":"233px"},1500); 37 $("#divWrapp2 .mainImg")} 38 39var obj_t_pos = $('#divWrapp2').offset().top; 40var scr_count = $(document).scrollTop()+(window.innerHeight/2); //ディスプレイの半分の高さ 41 42if(scr_count > obj_t_pos){ 43 ImgLargeFunc(); 44}else{ 45 ImgSmallFunc(); 46} 47 48}); 49}); 50
回答1件
あなたの回答
tips
プレビュー