javascriptを使用して、横から画像が出現するアニメーションを実装したい

Question

前提・実現したいこと

スクロールをしていくと
画像1つ1つが横から出現するアニメーション（javascript）を実装したいです。

発生している問題・エラーメッセージ

ネットで調べて
コピーペーストで実装できるアニメーションを見つけたのですが
実装をしても反応しませんでした。。

htmlファイルの中に

<script type="text/javascript">で直接読み込んでいます。 ### 該当のソースコード headタグ内に入れているインラインスクリプト ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ ``` <script type="text/javascript"> var slideConts = document.querySelectorAll('.slideConts'); // スライドで表示させる要素の取得 var slideContsRect = []; // 要素の位置を入れるための配列 var slideContsTop = []; // 要素の位置を入れるための配列 var windowY = window.pageYOffset; // ウィンドウのスクロール位置を取得 var windowH = window.innerHeight; // ウィンドウの高さを取得 var remainder = 100; // ちょっとはみ出させる部分 // 要素の位置を取得 for (var i = 0; i < slideConts.length; i++) { slideContsRect.push(slideConts[i].getBoundingClientRect()); } for (var i = 0; i < slideContsRect.length; i++) { slideContsTop.push(slideContsRect[i].top + windowY); } // ウィンドウがリサイズされたら、ウィンドウの高さを再取得 window.addEventListener('resize', function () { windowH = window.innerHeight; }); // スクロールされたら window.addEventListener('scroll', function () { // スクロール位置を取得 windowY = window.pageYOffset; for (var i = 0; i < slideConts.length; i++) { // 要素が画面の下端にかかったら if(windowY > slideContsTop[i] - windowH + remainder) { // .showを付与 slideConts[i].classList.add('show'); } else { // 逆に.showを削除 slideConts[i].classList.remove('show'); } } }); </script>

javascriptを適用させたい親要素と子要素（画像）
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

<div class="main02"> <h2> <img src="img/title-service.png" alt=""> </h2> <div class="slideContsL slideConts"><img src="img/service01.png" alt=""></div> <div class="slideContsR slideConts"><img src="img/service02.png" alt=""></div> <div class="slideContsL slideConts"><img src="img/service03.png" alt=""></div> <div class="slideContsR slideConts"><img src="img/service04.png" alt=""></div> <div class="slideContsL slideConts"><img src="img/service05.png" alt=""></div> <div class="slideContsR slideConts"><img src="img/service06.png" alt=""></div> <div class="slideContsL slideConts"><img src="img/service07.png" alt=""></div> <div class="slideContsR slideConts"><img src="img/service08.png" alt=""></div> <div class="slideContsL slideConts"><img src="img/service09.png" alt=""></div> <div class="slideContsR slideConts"><img src="img/service10.png" alt=""></div> </div> ``` CSS ↓↓↓↓ ``` .main02 { background-image: url("img/service-background.png"); max-width: 1000px; padding: 20px 0; box-shadow: 0px 2px 5px 2px #dbd9ce; text-align: center; position: relative; overflow: hidden; width: 800px; margin: 0 auto; }

.slideConts {
width: 500px;
height: 400px;
margin: 40px auto;
-webkit-transition: .5s;
-o-transition: .5s;
transition: .5s;
}

.slideContsL {
background-color: lightpink;
transform: translate(-800px, 0);
}

.slideContsR {
background-color: lightblue;
transform: translate(800px, 0);
}

.slideContsL.show {
transform: translate(-50px, 0) !important;
}

.slideContsR.show {
transform: translate(50px, 0) !important;
}

スクロールをすると、img/service01~10の画像が
右と左から交互に出現するようなアニメーションなのですが

何が問題でアニメーションが発動しないのか
ご教示いただきたいです。。

初歩的な質問で申し訳ないのですが
どうぞよろしくお願い致します。

Answer 1

<script>を</body>の直前に移動するか、ページロード（か DOMContentLoaded ）を待つようなコードに書き換えてください。