下記のテスト環境版だと動作確認できるのですが、本番用に移植するとなぜか動作せず、該当の要素が消えてしまいます。
本場用で動かしたい要素はsectionになります。
※参考にした記事:https://www.i-ryo.com/entry/2018/04/02/015103
詳しい方よろしくお願いいたします。
index.html
1 2<!--本番用--> 3 4 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 5 <script type="text/javascript" src="invew_js/jquery.inview.js"></script> 6 7 8<style type="text/css"> 9section { 10transform: translate(50px,0); 11-webkit-transform: translate(50px,0); 12opacity: 0; 13} 14.side_anime { 15 transform: translate(0,0); 16 -webkit-transform: translate(0,0); 17 opacity: 1; 18} 19 20</style> 21<section>... 22<h2>...</h2> 23 24<h3>....</h3> 25 26</section> 27 28 <script> 29 30 $(function() { 31 32 $('section').on('inview', function(event, isInView, visiblePartX, visiblePartY) { 33 if (isInView) { 34 $(this).addClass('side_anime'); 35 } else { 36 $(this).removeClass('side_anime'); 37 } 38 }); 39 40 41 }); 42 </script> 43 44
index.html
1 2<!--テスト環境--> 3<!DOCTYPE html> 4<html lang="ja" dir="ltr"> 5<head> 6 <meta charset="utf-8"> 7 8 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 9 <script type="text/javascript" src="invew_js/jquery.inview.js"></script> 10 11 <title>サンプル(JQueryのふわっとフェードイ風)</title> 12</head> 13<body> 14 15 <style type="text/css"> 16 h1, p { 17 text-align: center; 18 } 19 20 .scroll { 21 width: 100%; 22 max-width: 600px; 23 margin: 0 auto; 24 padding: 0; 25 } 26 27 .scroll li { 28 list-style: none; 29 transition: 0.5s; 30 margin: 0 0 50px; 31 } 32 33 .scroll img { 34 width: 100%; 35 margin: 10px 0 0 ; 36 } 37 38 .scroll figcaption { 39 text-align: center; 40 } 41 42 .scroll .fade_in { 43 opacity: 0; 44 } 45 46 .scroll .fade_in_anime { 47 opacity: 1; 48 } 49 50 .scroll .up { 51 transform: translate(0,50px); 52 -webkit-transform: translate(0,50px); 53 opacity: 0; 54 } 55 56 .scroll .up_anime { 57 transform: translate(0,0); 58 -webkit-transform: translate(0,0); 59 opacity: 1; 60 } 61 62 .scroll .side { 63 transform: translate(50px,0); 64 -webkit-transform: translate(50px,0); 65 opacity: 0; 66 } 67 68 .scroll .side_anime { 69 transform: translate(0,0); 70 -webkit-transform: translate(0,0); 71 opacity: 1; 72 } 73</style> 74 75 <h1>スクロールテスト</h1> 76<p>スクロールしてください<br> 77 スクロールしてください<br> 78 スクロールしてください<br> 79 スクロールしてください<br> 80 スクロールしてください<br> 81 スクロールしてください<br> 82 スクロールしてください<br> 83 スクロールしてください<br> 84 スクロールしてください<br> 85 スクロールしてください<br> 86 スクロールしてください<br> 87 スクロールしてください<br> 88 スクロールしてください<br> 89 スクロールしてください<br> 90 スクロールしてください<br> 91</p> 92<ul class="scroll"> 93 <li class="fade_in"><figure> 94 <figcaption>フェードイン</figcaption> 95 <img src="images/01.jpg"> 96 </figure></li> 97 98 <li class="up"><figure> 99 <figcaption>上に移動</figcaption> 100 <img src="images/02.jpg"> 101 </figure></li> 102 103 <li class="side"><figure> 104 <figcaption>横に移動</figcaption> 105 <img src="images/03.jpg"> 106 </figure></li> 107<p>スクロールしてください<br> 108 スクロールしてください<br> 109 スクロールしてください<br> 110 スクロールしてください<br> 111 スクロールしてください<br> 112 スクロールしてください<br> 113 スクロールしてください<br> 114 スクロールしてください<br> 115 スクロールしてください<br> 116 スクロールしてください<br> 117 スクロールしてください<br> 118 スクロールしてください<br> 119 スクロールしてください<br> 120 スクロールしてください<br> 121 スクロールしてください<br> 122 </p> 123</ul> 124 125 126 <script type="text/javascript"> 127//フェードイン 128$(function() { 129 130 $('.fade_in').on('inview', function(event, isInView, visiblePartX, visiblePartY) { 131 if (isInView) { 132 $(this).addClass('fade_in_anime'); 133 } else { $(this).removeClass('fade_in_anime'); 134 } 135 }); 136 137 $('.up').on('inview', function(event, isInView, visiblePartX, visiblePartY) { 138 if (isInView) { 139 $(this).addClass('up_anime'); 140 } else { 141 $(this).removeClass('up_anime'); 142 } 143 }); 144 145 $('.side').on('inview', function(event, isInView, visiblePartX, visiblePartY) { 146 if (isInView) { 147 $(this).addClass('side_anime'); 148 } else { 149 $(this).removeClass('side_anime'); 150 } 151 }); 152 153 154}); 155</script> 156 157</body> 158</html> 159
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。