【CSS】【Javascript】スクロールに合わせて画像をフェードインし、拡大・縮小させる方法

ウェブデザインにおいて、ユーザーのスクロールに合わせて要素がアニメーションする効果を使うことが一般的です。特に、画像を表示させる際に、フェードインと拡大・縮小のエフェクトを組み合わせることで、視覚的に印象的な効果を演出できます。

今回は、スクロールすると画像がフェードインし、拡大・縮小するアニメーションを1度だけ実行する方法を紹介します。

実現する動作

• ページ内の複数の画像要素がスクロール時に登場
• 画像が表示されると、フェードインして拡大し、その後元のサイズに戻る
• このアニメーションは1回だけ実行され、再度スクロールしても実行されません

必要なコード

1. HTML構造

まず、画像が含まれる要素（.cta）を作成します。複数の画像を配置しても問題ありません。

<div class="cta"><img src="img/jo-iin_cta.jpg" alt="城医院電話予約不要。06-6331-4830"></div>
<div class="cta"><img src="img/jo-iin_cta2.jpg" alt="別の電話番号"></div>
<!-- 他にも複数の .cta 要素 -->

2. CSSでアニメーションを設定

次に、画像が表示されたときのアニメーションを設定します。画像は最初は非表示で、スクロールによってフェードインし、拡大した後に元のサイズに戻ります。

.cta img {
  opacity: 0; /* 初めは透明 */
  transform: scale(1); /* 最初は通常のサイズ */
  transition: opacity 1s ease, transform 1s ease; /* フェードインとスムーズな拡大・縮小 */
}

.cta img.visible {
  opacity: 1; /* フェードイン */
  transform: scale(1.2); /* 最初の拡大 */
}

.cta img.reverted {
  transform: scale(1); /* 元のサイズに戻す */
}

このCSSでは、最初は画像が透明で通常のサイズに設定されています。.visible クラスが追加されると、画像はフェードインして拡大します。scale(1.2) で20%拡大し、.reverted クラスで元のサイズに戻します。

3. JavaScriptでスクロールイベントを追加

最後に、スクロール時に画像が画面に表示されたかどうかをチェックし、画像にアニメーションを適用するJavaScriptコードを追加します。

// スクロールイベントで各 .cta 要素の表示状態をチェック
window.addEventListener('scroll', function() {
  const ctaElements = document.querySelectorAll('.cta'); // すべての .cta 要素を取得

  ctaElements.forEach(function(ctaElement) {
    const imgElement = ctaElement.querySelector('img'); // 各 .cta 内の img 要素を取得
    const rect = imgElement.getBoundingClientRect();
    const windowHeight = window.innerHeight;

    // 画像の40%が表示されたかどうかをチェック
    if (rect.top <= windowHeight * 0.6 && rect.bottom >= windowHeight * 0.4) {
      // 画像が40%表示されたら、初回のみ拡大・フェードイン
      if (!imgElement.classList.contains('visible')) {
        imgElement.classList.add('visible');

        // 拡大後、元のサイズに戻す
        setTimeout(function() {
          imgElement.classList.add('reverted');
        }, 1000); // 1秒後に元のサイズに戻す
      }
    }
  });
});

解説

• window.addEventListener('scroll', function() {...}); でスクロールイベントを監視します。
• ctaElements.forEach(function(ctaElement) {...}); でページ内のすべての .cta 要素をループ処理します。
• getBoundingClientRect() を使って、各画像が画面内にどれだけ表示されているかを計算し、40%表示された時点で visible クラスを追加します。
• setTimeout を使って、拡大後1秒後に元のサイズに戻す処理を行っています。

実行例

このコードを使えば、ページをスクロールすると画像が表示されるときに、次のようなアニメーションが行われます。

1. 画像がフェードインし、20%拡大します。
2. 拡大後、画像は元のサイズに戻ります。
3. アニメーションは1回だけ実行され、再度スクロールしても実行されません。

まとめ

今回の方法では、スクロール時に画像がフェードインし、拡大・縮小するアニメーションを1度だけ行う方法を紹介しました。このようなアニメーションを使うことで、ユーザーによりインタラクティブな体験を提供できます。ぜひ、あなたのウェブサイトに取り入れて、視覚的な効果を加えてみてください。