【JS&CSS】一定時間毎に表示がフワッと変わる

2024年9月20日

JavaScript のsetInterval()関数とCSSの@keyframesを組み合わせ、一定時間毎に表示がフワッと変わる実装方法を紹介します。

なお、フワッとではなく瞬時に切り替えるだけなら以下記事で紹介しています。（本記事はその応用編です。）

あわせて読みたい

【JS】一定時間ごとに表示内容を変える setInterval()という関数を使い、一定時間経過すると文章が次々に変わっていく実装方法を紹介します。また、ボタンをクリックすることで停止 / 再開させる方法も載せて…

また、クリックで能動的に表示を変える方法（カルーセル）も公開しています。

あわせて読みたい

【JS&CSS】クリックで画像を切り替える（カルーセル）画像をクリックまたは画像に表示された矢印マークをクリックすると、次々と別の画像に切り替わっていく方法を公開します。自分の学習・メモ用がメインですが、プログ…

いずれも自分の学習・メモ用がメインですが、プログラミング学習初心者の参考になればと思います！

実装例とコード

以下のテキストが、3秒毎にふわっと変わっていきます。
（「こんにちは！」→「Hello！」→「你好！」→「Bonjour！」→「Guten Tag！」の繰り返し）

こんにちは！

Hello!

你好！

Bonjour！

Guten Tag！

複雑なアニメーションには、CSSプロパティの@keyframesを使います！
以下のように記述することで、特定の要素に多様なアニメーションがつけられます。

div {
  animation: 1s xxx;
}

@keyframes xxx {   /* xxxは好きな名前でOK */
  0% {
    /* 変化前の状態 */
  }
  50% {
    /* 変化中の状態。%の値は自由に決められ、複数用意してもOK。 */
  }
  100% {
    /* 変化後の状態 */
  }
}

上の例のように、@keyframeで変化の内容を記述し、変化をつけたいスタイルにアニメーション名と変化時間を記載します。これでdiv要素には、@keyframesに設定したアニメーションが1秒かけて実装されます。

シンプルなアニメーションについてはこちら

マウスホバーやボタンクリック（タップ）に反応するような、シンプルなアニメーションには「transform」や「transition」を使います。以下のような実装に向いています。

あわせて読みたい

【JS&CSS】クリック（タップ）で画像を拡大させる transform: scale;を使って、画像や図形を拡大表示させる方法を紹介します。自分の学習・メモ用がメインですが、プログラミング学習初心者の参考になればとも思います！…

特定の処理を繰り返し実行するには、JavaScriptの「setInterval()」関数を使います！
以下のように記述することで、特定の要素に多様なアニメーションがつけられます。

第1引数に繰り返したい関数（関数名の後ろに()は付けないこと）、第2引数にミリ秒単位の数字を設定すると、設定した関数がミリ秒単位で繰り返し実行されます。

function show() {
  console.log('hello');
}

setInterval(show, 1000);

上の例では、1000ミリ秒（1秒）毎にshow関数が実行されます。

以下、実装例のHTML・CSS・JavaScriptコードです。

HTML/CSS/JavaScript

<p class="message appear">こんにちは！</p>
<p class="message">Hello!</p>
<p class="message">你好！</p>
<p class="message">Bonjour！</p>
<p class="message">Guten Tag！</p>

予め表示したいテキストすべてを記述しておき、CSSの「display: none;」と「display: block;」を使って最初に表示したいものだけを表示させておく。

.message {
  display: none;
  text-align: center;
}

.message.appear {
  display: block;
  animation: 2s fadeIn;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

「display: none;」と「display: block;」を使い、appearクラスがついたテキストだけが表示されるようにする。
@keyframesでは、初期（0%）はopacityを0、変化後（100%）はopacityを1とする。さらに表示テキストのクラスに2秒のanimationを設定することで、2秒かけてopacityが0から1になるアニメーション（ふわっと表示）が付けられる。

const messages = document.querySelectorAll('.message');
// 次の画像から表示されるようにする
let currentIndex = 1;

function messageAppear() {
  // currentIndexがmessages.lengthに等しいとき（最後のメッセージが表示されたとき）に0にリセット
  if (currentIndex >= messages.length) {
    currentIndex = 0;
  }

  // すべてのメッセージからappearクラスを削除
  messages.forEach(message => {
    message.classList.remove('appear');    
  });

  // 現在のメッセージにappearクラスを追加
  messages[currentIndex].classList.add('appear');
  
  // 次のメッセージに進む
  currentIndex++;
}

// 3秒ごとにmessageAppearを呼び出す
setInterval(messageAppear, 3000);