該当のソースコード
HTML
1<div id="exampleId01"> 2</div> 3<div id="exampleId02"> 4</div> 5<div id="exampleId03"> 6</div>
CSS
1.fadeIn_LeftToRight { 2 animation-name: fadeIn; 3 animation-fill-mode: forwords; 4 5} 6 7@keyframes fadeIn { 8 0% { 9 opacity: 0; 10 transform: translateX(-100px); 11 } 12 13 100% { 14 opacity: 1; 15 transform: translateX(0px); 16 } 17}
JavaScript
1LeftToRight("exampleId01"); 2 3LeftToRight("exampleId03"); 4 5function LeftToRight(elm) { 6 let targetElement = document.getElementById(elm); 7 8window.onscroll = function() 9{ 10 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 11 12 var bottom = scrollTop + document.documentElement.clientHeight; 13 14 var top = targetElement.offsetTop; 15 16 if( top < bottom ) 17 { 18 document.getElementById(elm).class list.add("fadeIn_LeftToRight"); 19 } 20} 21 22} 23
発生している問題・エラーメッセージ
スクロールに応じて要素をフェードインで表示させるコードを実装したいです。
上記のように関数(LeftToRight())を作成して引数にて要素を指定しようとする場合、一回だけの呼び出し(1要素の指定)では無事に動作するのですが、別の要素にも適用させる為に2回呼び出しすると2回目に呼び出した際の要素にのみスタイルが当たってしまい思ったとおりの実装になりません。
最終的にはスクロールに応じて交互に左右からフェードインするようにしたいです。
→
←
→
←
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。