スクロールして要素が画面内に入ったときに、ふわっと表示されるアニメーションを実装する方法について説明します。このアニメーションは、ユーザーの視覚的な興味を引くために多くのウェブサイトで利用されています。以下に、基本的な実装方法を紹介します。
- HTMLの準備
- CSSの設定
- CSSプロパティの詳細
- アニメーションの流れ
- JavaScriptでスクロールイベントを設定
- JavaScriptコードの詳細
- まとめ
HTMLの準備
まず、アニメーションさせたい要素にクラスを追加します。このクラスは後でJavaScriptで操作します。
<div class="fade-in-element">コンテンツ</div>
CSSの設定
CSSで初期状態とアニメーション後のスタイルを定義します。
ここでは、要素を透明にしておき、アニメーションによって表示されるようにします。
.fade-in-element {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.fade-in-element.is-visible {
opacity: 1;
transform: translateY(0);
}
CSSプロパティの詳細
1. .fade-in-element クラス
opacity: 0;
要素の不透明度を0に設定しています。これにより、要素は初期状態では完全に透明になります。transform: translateY(20px);
要素を垂直方向に20ピクセル下に移動させています。これにより、要素は初期状態で少し下にずれた位置から始まります。transition: opacity 0.5s ease-out, transform 0.5s ease-out;
トランジション（変化）の設定です。
opacity 0.5s ease-out: 不透明度が変化する際のトランジションを設定しています。0.5秒かけて変化し、終了時にゆっくりと止まる（ease-out）アニメーションになります。transform 0.5s ease-out: transformプロパティが変化する際のトランジションを設定しています。こちらも同様に0.5秒かけて変化し、終了時にゆっくりと止まります。
2. .fade-in-element.is-visible クラス
このクラスはJavaScriptで要素が画面内に入ったときに追加されます。
opacity: 1;
要素の不透明度を1に設定しています。これにより、要素は完全に表示されます。transform: translateY(0);
要素を元の位置（垂直方向の移動なし）に戻します。これによって、要素が下から上へスライドしてくるような効果が得られます。
アニメーションの流れ
- 初期状態では、要素は透明で少し下に位置しています。
- JavaScriptによって画面内に要素が入ったことが検出されると、「is-visible」クラスが追加されます。
- トランジションによって、不透明度が0から1へ、位置が20px下から元の位置へと変化します。
- この変化は0.5秒かけて行われ、終了時にはゆっくりと止まるため、自然なアニメーション効果が得られます。
このようなCSSトランジションを利用することで、シンプルながら視覚的なインパクトのあるアニメーションを実現できます。
JavaScriptでスクロールイベントを設定
次に、JavaScriptを使用してスクロールイベントを監視し、要素が画面内に入ったときにクラスを追加します。
document.addEventListener('DOMContentLoaded', function() {
const elements = document.querySelectorAll('.fade-in-element');
const onScroll = () => {
elements.forEach(element => {
const rect = element.getBoundingClientRect();
if (rect.top < window.innerHeight) {
element.classList.add('is-visible');
}
});
};
window.addEventListener('scroll', onScroll);
onScroll(); // 初期表示時にもチェック
});
JavaScriptコードの詳細
1. document.addEventListener('DOMContentLoaded', function() {...})
DOMContentLoaded イベント
このイベントは、HTMLドキュメントの読み込みと解析が完了したときに発生します。このタイミングでスクリプトを実行することで、DOM要素が完全に利用可能になった状態でスクリプトを操作できます。
2. const elements = document.querySelectorAll('.fade-in-element');
document.querySelectorAll メソッド
このメソッドは、指定されたCSSセレクター（ここでは.fade-in-element）に一致するすべての要素を取得します。結果はNodeListとして返され、これをelementsという変数に格納しています。これによって、ページ内のすべてのアニメーション対象要素を操作できます。
3. const onScroll = () => {...}
- スクロールイベントハンドラー
onScrollはアロー関数で定義された関数で、スクロール時に実行されます。この関数内で各要素が画面内に入っているかどうかをチェックします。
4. elements.forEach(element => {...})
forEach ループ
NodeListに対してforEachメソッドを使用し、各要素に対して処理を行います。ここでは、各要素の位置を確認しています。
5. const rect = element.getBoundingClientRect();
getBoundingClientRect() メソッド
このメソッドは要素のサイズと位置を取得し、ビューポートに対する矩形情報（DOMRectオブジェクト）を返します。この情報を使って要素が画面内に入っているかどうかを判断します。
6. if (rect.top < window.innerHeight) {...}
- 条件チェック
rect.topは要素の上端がビューポートの上端からどれだけ離れているかを示します。この値がウィンドウの高さより小さい場合（つまり、要素が画面内に入っている場合）、以下の処理が実行されます。
7. element.classList.add('is-visible');
- クラスの追加
要素が画面内に入ったとき、「is-visible」クラスを追加します。このクラスが追加されることで、CSSによるアニメーションが適用されます。
8. window.addEventListener('scroll', onScroll);
- スクロールイベントリスナー
ウィンドウ全体に対してスクロールイベントリスナーを設定し、ユーザーがスクロールするたびにonScroll関数が呼び出されるようにしています。
9. onScroll(); // 初期表示時にもチェック
- 初期チェック
ページロード直後にも一度onScroll()を呼び出すことで、初期状態で既に画面内にある要素にもアニメーションを適用します。これによって、ページロード時点で表示されている要素も正しく表示されます。
このスクリプトは、ウィンドウがスクロールされるたびに各要素の位置をチェックし、画面内に入った場合に「is-visible」クラスを追加します。このクラスが追加されることで、CSSのトランジションが発動し、要素がふわっと表示されます。
