【JAVASCRIPT】要素が見えたとき表示されるスクロールアニメーション

タグ :

JAVASCRIPT

PROGRAMMING

1 スクロールして特定の要素が見えたときに.target要素が横からふわっと表示されるアニメーションを実装させる
2 Javascriptコードの詳細な説明

スクロールして特定の要素が見えたときに.target要素が横からふわっと表示されるアニメーションを実装させる

スクロールした際に、特定の要素が画面内に入ったときに.targetクラスを持つ要素が横からふわっと表示されるアニメーションを実装するには、以下のステップが必要です。

スクロールイベントの監視

ページのスクロール位置を常に監視し、特定の要素が表示領域に入ったかどうかを判断します。

要素の位置検出

監視対象の要素が、スクロールによって表示領域内に現れたタイミングを検出します。これは、要素の位置を計算することで実現できます。

アニメーションのトリガー

要素が表示されたと検出された場合、.targetクラスを持つ要素に対してアニメーションを開始させます。アニメーションは、例えばCSSのtransformプロパティを使って、要素が横からスライドインするように設定できます。

アニメーション効果

横からふわっと表示されるためには、transitionやanimationを利用して、滑らかな動きと透明度の変化を組み合わせた効果を設定します。

See the Pen
Untitled by ryotom (@ryotam-smoke)
on CodePen.

Javascriptコードの詳細な説明



document.addEventListener('DOMContentLoaded', (event) => {
// 1. ページの読み込みが完了した後に実行される関数を設定します。

const target = document.querySelector('.target');
// 2. ページ内の .target クラスを持つ要素を取得します。

const observer = new IntersectionObserver((entries, observer) => {
// 3. IntersectionObserverを作成します。このオブジェクトは要素が表示領域に入ったり出たりするのを監視します。

entries.forEach(entry => {
// 4. 監視対象のすべてのエントリをループします。

if (entry.isIntersecting) {
// 5. エントリが表示領域内に入っているかをチェックします。

target.classList.add('visible');
// 6. 表示領域内に入った場合、ターゲット要素に 'visible' クラスを追加します。

observer.unobserve(entry.target);
// 7. 一度だけトリガーさせるために、対象の要素の監視を解除します。
}
});
}, { threshold: 0.5 });
// 8. IntersectionObserverのオプションを設定します。threshold: 0.5 は、要素が50%表示されたときにコールバックを呼び出すという意味です。

observer.observe(target);
// 9. 先に取得したターゲット要素の監視を開始します。
});

1.イベントリスナーの設定

document.addEventListener(‘DOMContentLoaded’, …) は、ページのすべてのHTMLが読み込まれた後に指定した関数を実行します。これにより、DOMが完全に構築されるまでスクリプトの実行を待ちます。

2.ターゲット要素の取得

document.querySelector(‘.target’) は、クラス名が target の最初の要素を取得します。この要素が監視対象になります。

3.IntersectionObserverの作成

new IntersectionObserver((entries, observer) => { … }, { threshold: 0.5 }) は、IntersectionObserverオブジェクトを作成します。threshold: 0.5 は、要素が50%表示されたときにコールバック関数を呼び出すように設定しています。