【JavaScript&CSS】テキストや画像を点滅させる方法

JavascriptとCSSで表示を点滅させる方法

CSSの「@keyframes」やJavaScript の「setInterval()」関数を使って、テキストや画像を点滅させる方法を紹介します。
自分の学習・メモ用がメインですが、プログラミング学習初心者の参考になればと思います!

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

目次

実装例とコード

実装コードは こちら

実装コードは こちら

実装コードは こちら


複雑なアニメーションには、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関数が実行されます。

「@keyframes」と「setInterval関数」を使うことで、以下のように『表示をゆっくり変えていく』といったアニメーションを作ることをもできます。

こんにちは!

Hello!

你好!

Bonjour!

Guten Tag!

詳しくは以下記事で解説していますので、合わせてご覧ください。

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

フワッとゆっくり点滅させる

CSSのみで実装できます。(JavaScript不要)

HTML/CSS
<p class="custom-blink">フワッと点滅します。</p>
.custom-blink {
  animation: blink-slow 1s infinite;
}

@keyframes blink-slow {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
  • 1秒かけてアニメーション「blink-slow」が実行されます。
  • 「infinite」を合わせて記述することで、アニメーションが無制限に繰り返されます。

チカチカと素早く点滅させる

CSSのみで実装できます。(JavaScript不要)

HTML/CSS
<p class="custom-blink">チカチカと点滅します。</p>
.custom-blink {
  animation: blink-fast .3s linear infinite;
}

@keyframes blink-fast {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 1;
  }
}
  • 0.3秒かけてアニメーション「blink-fast」が実行されます。
  • 「infinite」を合わせて記述することで、アニメーションが無制限に繰り返されます。
  • 「linear」を合わせて記述することで、アニメーションが最初から最後まで等速で動きます。

一定時間感覚で機械的に点滅させる

CSSのアニメーションではアナログ的な動きになってしまうため、デジタル的に瞬時に切り替えるにはJavaScriptを使います。

HTML/CSS/JavaScript
<p class="custom-blink">1秒間隔で点滅します。</p>
.custom-blink.hidden {
  display: none;
}
const customBlink = document.querySelector('.custom-blink');

function blink() {
    customBlink.classList.toggle('hidden');    
}

setInterval(blink, 1000);
  • 1秒毎にhiddenクラスを付け外しします。hiddenクラスが付くと表示が消えるため、1秒間隔で表示が出たり消えたりします。
  • setIntervalの第二引数の数字を変えることで、点滅のスピードを自由に調整できます。

まとめ

以上、3つの点滅パターンについて実装方法を紹介しました。

点滅の具合(フワッと点滅させるのか、瞬時に点滅させるのか)や点滅の間隔は自由に設定できるので、色々試してみてお気に入りの状態を模索してください!(あまりチカチカさせると目が疲れてしまうので、ホドホドに。)

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

この記事を書いた人

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

目次