【JavaScript】画像や文字を画面の横からフェードインさせる方法

Webページにおいて、画像や文字を画面の横からフェードインさせるエフェクトは、訪問者にインパクトを与え、注目を集める効果的な方法です。この記事では、CSSのアニメーションとJavaScriptを用いて、このフェードインエフェクトを実装する方法を紹介します。

HTML

まず、フェードインさせたい要素をHTMLに追加します。以下はその例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>フェードイン</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="fade-in-element">
        <img src="path/to/your/image.jpg" alt="フェードイン画像">
        <p>フェードインする文字</p>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSSの準備

次に、CSSで初期状態とアニメーションを定義します。

/* styles.css */
.fade-in-element {
    opacity: 0;
    transform: translateX(-100%);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.fade-in-element.fade-in {
    opacity: 1;
    transform: translateX(0);
}

JavaScript

最後に、JavaScriptでスクロールに応じてクラスを追加するスクリプトを記述します。

// script.js
document.addEventListener('DOMContentLoaded', function() {
    const fadeInElements = document.querySelectorAll('.fade-in-element');

    function checkVisibility() {
        fadeInElements.forEach(function(element) {
            const rect = element.getBoundingClientRect();
            if (rect.top < window.innerHeight && rect.bottom > 0) {
                element.classList.add('fade-in');
            }
        });
    }

    window.addEventListener('scroll', checkVisibility);
    checkVisibility();
});

サンプル

WordPressでカスタム投稿のアイキャッチ画像が表示されない原因と対処法

フェードインする文字

解説

まず、HTMLでは、.fade-in-elementクラスを持つ要素を追加し、この要素がフェードインの対象となります。

次に、CSSでは、.fade-in-elementクラスの初期状態を非表示（opacity: 0）にし、画面の左外（translateX(-100%)）に位置させます。そして、.fade-in-element.fade-inクラスが追加されると、要素は表示され（opacity: 1）、元の位置に戻ります（translateX(0)）。

最後に、JavaScriptでは、ページが読み込まれた時に.fade-in-elementクラスを持つ要素を全て取得し、スクロールイベントが発生するたびにcheckVisibility関数を呼び出して、要素がビューポート内にあるかどうかをチェックします。ビューポート内にある要素に対してfade-inクラスを追加し、フェードインアニメーションを開始します。

まとめ

この方法を用いることで、画像や文字を画面の横から自然にフェードインさせることができます。CSSとJavaScriptを組み合わせることで、シンプルながら効果的なアニメーションを実現できます。是非、自分のプロジェクトで試してみてください。