【コピペOK】要素を順番にフェードインさせる【JavaScript】

JavaScript 要素を順番にふわっと表示させる（JavaScript）
要素を順番にフェードイン（ふわっと）させたい方
※本ページはプロモーションが含まれています
目次

概要

JavaScriptを使って要素を順番にフェードインしていく方法です。JavaScriptを使えば様々なアニメーションやエフェクトを実装することができますが、今回は人気のあるフェードイン、いわゆる「ふわっと」出現させるアレです。

今回は順番にフェードインさせるアニメーションを実装したいと思います。

↓デモはコチラ

DEMO

 

ウェブ開発の人気オンラインコース

前提

wow.jsというJavaScriptのアニメーションライブラリを使用します。

公式はコチラ

 

手順

  1. wow.jsの基本
  2. wow.jsの導入
  3. Java Scriptの実装

※結論から知りたい方は下の最終形態をご覧ください。

wow.jsの基本

以下はwow.jsの基本設定です。

<li class="wow fadeInUp" data-wow-delay="0.2s">Item01</li>

まずclassに”wow”と”fadeInUp”を付与します。この”fadeInUp”を変えることでアニメーションの動きを変えることが可能です。

そしてデータ属性としてdata-wow-delay=”0.2s”を設定します。これはアニメーションの発火するタイミングに関する設定です。

※fadeInUpやデータ属性には様々な種類がありますので公式でぜひご確認ください。

wow.jsの導入

まず最初にフェードインアニメーションを実装するためのJavaScriptライブラリ、wow.jsを導入します。

wow.jsは簡単にスクロールに連動したフェードインアニメーションが実装できるため、多くのサイトで利用されています。

また設定も簡単なのですが、何より導入が非常に簡単であることも人気の理由です。wow.jsに必要なファイルは以下の2つです。

  • anime.css
  • wow.min.js

どちらも直接ファイルをダウンロードして読み込む方法とCDNで読み込む方法がありますが、今回はCDNで読み込む方法を採用します（楽なので）

以下のコードをhtmlの<head>内に挿入してください。

<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<link　rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.6.2/animate.min.css"/>

次に</body>の直前あたりに以下のコードを挿入してください。

このコードはwow.jsを実行するためのものです。

<script>
    new WOW().init();
</script>

これで準備は整いました。

JavaScriptの実装

次にJavaScriptを実装していきたいと思います。以下のコードを先程の、new WOW().init();の下あたりに挿入してください。

function wowFadeInFunc(num, initialDelay, step) {
    const items = document.querySelectorAll('.item' + num);

    if (items.length === 0) {
        return; 
    }

    let delay = initialDelay;

    items.forEach((item, index) => {
        item.dataset.wowDelay = `${delay}s`;
        delay += step;
    });
}

document.addEventListener('DOMContentLoaded',()=>{
    wowFadeInFunc(1,0.2,0.2);
})

以下コードの解説です（とりあえず動かしたい方は先に進んで動きを確認してからまた戻ってきてもいいです）

function wowFadeInFunc(num, initialDelay, step)

ここでは関数の宣言を行っています。各引数は以下の通りです。

num = classの識別で使用。今回のケースのように、フェードインのタイミングが単一の場合はなくてもOK。

initialDelay = 最初の要素がフェードインするタイミングをここで設定。例えば0.2なら0.2秒後にフェードインが行われます。

step = フェードインする単位です。0.4なら0.4（秒）単位でフェードインが行われます。

 

const items = document.querySelectorAll('.item' + num);

if (items.length === 0) {
    return; 
}

ここではフェードインする要素をitemsとして取得。もしitemsが無い場合はその場で処理を終了させます。

 

let delay = initialDelay;

items.forEach((item, index) => {
    item.dataset.wowDelay = `${delay}s`;
    delay += step;
});

変数delayに先程の引数initialDelayを代入します。

そして要素をループで回して、それぞれの要素にデータ属性を付与していきます。なおここではデータ属性として、

data-wow-delay=”0.2s”（delayを0.2とした場合）

を付与しています。

そして最後にstepに次の要素のアニメーションの発火する値を代入しています。

 

document.addEventListener('DOMContentLoaded',()=>{
    wowFadeInFunc(1,0.2,0.2);

最後にこれまでで設定した関数（wowFadeInFunc）を引数を設定して実行させます。

今回の例ですと、読み込みが終わった段階で関数が実行されます。

※厳密には完全に読み込みは終わっていませんが、ここでは詳細は割愛します。詳細を知りたい場合は、「DOMContentLoaded　load　違い」で検索してみてください。

因みに引数は以下の通りです。

num = 1 （classに付与される値）

initialDelay = 0.2 （最初に発火するアニメーションのタイミング）

step = 0.2（2個目以降のタイミングの単位。今回だと0.2秒単位で発火）

 

最終形態

最終的なコードは以下の通りとなります（スタイリングは面倒臭いのでTailwindを使用しています）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>wow_fadeIn</title>
    <meta name="description" content="wow_fadeIn">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.6.2/animate.min.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>

<section class="flex justify-center items-center h-screen">
    <ul class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <li class="item1 text-white font-bold p-8 text-center bg-gray-500 wow fadeInUp">Item01</li>
        <li class="item1 text-white font-bold p-8 text-center bg-gray-500 wow fadeInUp">Item02</li>
        <li class="item1 text-white font-bold p-8 text-center bg-gray-500 wow fadeInUp">Item03</li>
    </ul>
</section>

<footer></footer>
<script>
    new WOW().init();

    function wowFadeInFunc(num, initialDelay, step) {
        const items = document.querySelectorAll('.item' + num);

        if (items.length === 0) {
            return; 
        }

        let delay = initialDelay;

        items.forEach((item, index) => {
            item.dataset.wowDelay = `${delay}s`;
            delay += step;
        });
    }

    document.addEventListener('DOMContentLoaded',()=>{
        wowFadeInFunc(1,0.2,0.2);
    })
</script>
</body>
</html>

まとめ

いかがだったでしょうか？

ちょっとした演出でサイトの雰囲気は変わるものです。特にECサイトでの適度な演出は、利用者の購買意欲を促進することも期待できます。実装してみて心地良いと思える演出を心掛けてください。

なおこの他にもJavaScriptを使えば様々なアニメーションやエフェクトが実装できます。以下に人気のオンライン講座を掲載していますので、ぜひ参考にしてみてください。

ウェブ開発の人気オンラインコース