JavaScriptとCSSで画像を順に表示し、上下に動かすアニメーションの実装

Posted on by

この記事では、JavaScriptとCSSを使用して、画像が順番にゆっくり表示されるアニメーションを実現し、
さらにCSSで画像が上下にゆっくり動くアニメーションを追加する方法を解説します。

アニメーションは、JavaScriptのsetTimeoutを使用して、画像を時間差で表示させるとともに、
CSSで上下に動かすアニメーション効果を設定します。
これにより、視覚的にリッチで動きのあるウェブページを作成することができます。

それでは、具体的な実装を見ていきましょう。

HTML構造

まずは、アニメーションを適用するためのHTML構造を用意します。
今回は、2つの画像を順に表示し、そのうちの1つの画像が上下にゆっくり動くようにします。

<div class="mv">
    <img id="mvicon" src="img/top/mvicon.svg" alt="">
    <p class="logo">
        <img id="mvlogo" src="img/top/mvlogo.svg" alt="">
    </p>
</div>

上記のコードでは、imgタグで2つの画像を読み込みます。
それぞれの画像にID属性を付けておき、JavaScriptで操作できるようにします。

CSSスタイル

次に、CSSでアニメーションの基本的な設定を行います。
最初に画像を非表示にし、表示されるときにフェードインするようにします。
また、2つ目の画像には上下に動くアニメーションを追加します。

.mv img {
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

#mvlogo {
    position: relative;
    animation: moveUpDown 3s ease-in-out infinite;
}

/* 上下にゆっくり動くアニメーション */
@keyframes moveUpDown {
    0% {
        top: 0;
    }
    50% {
        top: 10px; /* 上下に動く距離を調整 */
    }
    100% {
        top: 0;
    }
}

CSSのポイント

  • opacity: 0: 画像を最初に非表示にします。
    transitionプロパティで、画像の透明度が変化する際にアニメーション効果を付け、
    画像が徐々に表示されるようにします。
  • #mvlogo: 2つ目の画像に対して、@keyframesを使い、上下に動くアニメーションを追加しています。
    3s ease-in-out infiniteは、3秒間で上下にゆっくり動くアニメーションを無限に繰り返す設定です。

JavaScriptで順番に画像を表示

次に、JavaScriptで画像が順番に表示されるように処理を行います。
setTimeoutを使って、2つの画像を時間差で表示します。

document.addEventListener('DOMContentLoaded', function() {
    const mvicon = document.getElementById('mvicon');
    const mvlogo = document.getElementById('mvlogo');

    // 最初の画像をゆっくり表示
    setTimeout(function() {
        mvicon.style.opacity = 1;
    }, 500); // 0.5秒後に表示

    // 2つ目の画像を少し遅れて表示
    setTimeout(function() {
        mvlogo.style.opacity = 1;
    }, 2000); // 2秒後に表示
});

JavaScriptのポイント

  • setTimeout: 画像の表示タイミングを遅らせるために使用します。1つ目の画像（mvicon）は0.5秒後に、2つ目の画像（mvlogo）は2秒後に表示されるように設定しています。
  • opacity: JavaScriptでCSSのopacityを変更し、画像を表示します。これにより、CSSで設定したtransitionが適用され、フェードインアニメーションが実現します。

説明

CSS

opacityプロパティを使って、画像を0（透明）から1（完全に表示）に変化させ、
画像がゆっくりとフェードインする効果を持たせています。
さらに、@keyframesを使って、2つ目の画像が上下にゆっくりと動くアニメーションを設定しました。

  • transition: opacity 1.5s ease-in-out;: opacityの変化に1.5秒かけ、
    スムーズなフェードインを実現します。
  • animation: moveUpDown 3s ease-in-out infinite;: 2つ目の画像に対して、
    上下にゆっくりと動く無限ループのアニメーションを設定しています。

JavaScript

setTimeoutを使用して、画像が順番に表示されるようにしています。

  • 1つ目の画像（mvicon）は、ページの読み込み後0.5秒で表示されます。
  • 2つ目の画像（mvlogo）は、さらに1.5秒遅れて、合計2秒後に表示されます。表示されると、上下に動くアニメーションが自動的に適用されます。

まとめ

今回の実装で、JavaScriptとCSSを使って画像を順番に表示し、
さらにアニメーション効果を加える方法を学びました。
CSSのtransitionや@keyframesをうまく活用することで、
シンプルで効果的なアニメーションを実現できます。

このような手法を活用して、ウェブサイトのビジュアルをより動的にし、
ユーザーにとって魅力的な体験を提供することができます。