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

JavascriptとCSSで一定時間ごとに表示をフワッと切り替えていく方法

JavaScript の「setInterval()」関数に、CSSの「@keyframes」を組み合わせることで、一定時間経過すると表示が次々にふわっと変わっていく実装方法を紹介します。

なお、一定時間ごとに表示をパッと切り替えるだけなら以下記事で紹介しています。
(本記事はその応用編です。)

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

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

ブラウザはGoogle Chromeを使い、Wordpress上で実装しています。

目次

実装例とコード

以下のテキストが、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秒かけて実装されます。

特定の処理を繰り返し実行するには、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 i = 1;

function messageAppear() {
  if (i > 4) {
    i = 0;
  }

  messages.forEach(message => {
    message.classList.remove('appear');    
  });

  messages[i].classList.add('appear');
  i++;
}

setInterval(messageAppear, 3000);
  • setInterval関数を使い、appearクラスを3秒毎に付け外しする。appearクラスが付くとCSSで設定した@keyframesのアニメーションが起動し、連続してフワッとした表示になる。

応用例

前回の記事 で紹介した関連記事を2秒毎に変更する方法も、こんな風にふわっと表示切り替えができます。

2秒毎に記事が変わるよ!
【2022年最新版】SDGs関連グッズ総まとめ 本記事ではSDGs(エス・ディー・ジーズ)に関連した商品をピックアップ! 天然素材やリサイクル素材といった地球環境に優しいものから、オーガニックコットンやフェアト…
2秒毎に記事が変わるよ!
【2022年最新版】あったかグッズ総まとめ 秋冬ノベルティの中でも根強い人気のあるブランケットを中心に、最新のあったかグッズを纏めました。特に女性に人気の商品が多く、秋冬に行われるレディース向けのイベ…
2秒毎に記事が変わるよ!
【2022年最新版】防災関連グッズ総まとめ 突然の災害など、もしもの非常事態に備えておきたい防災関連グッズを紹介します!ライトや防寒具、簡易トイレなどの個別商品から持出袋に入ったセットアイテムまで、幅…
2秒毎に記事が変わるよ!
【2022年最新版】衛生関連グッズ総まとめ マスクや除菌スプレー、抗菌加工グッズなど、最新の感染症対策用品をピックアップしました。 新型コロナウイルス対策はもちろん、普段の衛生管理にも役立てるはず!除菌…
2秒毎に記事が変わるよ!
【2022年最新版】和風グッズ総まとめ 扇子や和食器などの日本ならではグッズから、日本を感じる和柄デザインのグッズ、日本が誇る食料品を中心にピックアップ! お祭りや花火大会、神社・お寺への参拝などの…

Webサイトのトップページで見かける、メイン画像がフワッと切り替わっていくような実装にも使えそうですね。
ぜひ、いろいろな使い方を模索してみてください!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

ノベルティグッズのECサイトを運営する中小企業役員。
本ブログを通じ、販促向けの最新/ロングセラー商品紹介やWebサイト制作に役立つ技術情報を発信しています。

目次