【CSS+JS】スクロールでふわっと出てくるフェードインの実装方法【jQueryなし】
画像や要素などがスクロールするとふわっと出てくる「フェードイン」の実装方法をまとめます。仕事でやることになって、調べましたが自力でも出来そうだったので、私のようにjQueryに依存しないで実装したいという方のために書きます。ちなみに私はjQueryは個人的に苦手でまったく書けないです…。
適当なHTMLを用意しました。ここではh1と内容全体にフェードインさせるクラスを付けました。
HTML <main class="main"> <h1 class="fade-in">スクロールするとふわっと現れる</h1> <div class="content fade-in"> <p>コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。</p> <p>コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。</p> </div> </main>
CSS /* フェードインしたい要素に付けるクラス */ .fade-in { opacity: 0; transform: translateY(50px); transition: all 300ms; } /* フェードインするためのクラス */ .fade-in.show { opacity: 1; transform: translateY(0); }
JavaScript //ふわっと出てくるエフェクト let scrollAnimationElm = document.querySelectorAll('.fade-in'); let scrollAnimationFunc = function(){ for(let i = 0; i < scrollAnimationElm.length; i++){ let triggerMargin = 300; if(window.innerHeight > scrollAnimationElm[i].getBoundingClientRect().top + triggerMargin){ scrollAnimationElm[i].classList.add('show'); //getBoundingClientRectは要素の高さを取得 } } } window.addEventListener('load', scrollAnimationFunc); window.addEventListener('scroll', scrollAnimationFunc);
JavaScriptは</body>直前で読み込んでください。
たったこれだけでWebサイトがリッチな感じになります。見ている方も、アニメーションする方が読み込まれている感じがするのでスクロールしてもらいやすい(?)と私は勝手に思っています。
すでにあるサイトにクラスを付けてCSS+JSコピペで実装できるので、ぜひやってみてください!