javascript 文字の色をanimateで変化させる

作成日 2022.08.03
javascript
javascript

javascriptで、文字の色をanimateで変化させるサンプルコードを記述してます。

1. 環境
2. 文字の色をanimateで変化
3. サンプルコード

環境

OS windows10 pro 64bit
Apache 2.4.43
ブラウザ chrome 103.0.5060.134

Javascript サンプル集はこちら

文字の色をanimateで変化

文字の色をanimateで変化させるには、「animate」で「color」を使用します。

要素名.animate(
  {
    color: ["#fff", "#000"],		// 文字色を指定
  },
  3000	// 時間（ミリ秒）
);

実際に、変化させてみます。

<button id="btn" type="button">ボタン</button>
<div id="foo"></div>

<script>

document.getElementById("btn").onclick = function(){
  
  // pタグ生成
  let elm = document.createElement("p");

  elm.textContent = "hoge";
  
  elm.animate(
    {
      color: ["#fff", "#000"],		// 文字色を変化させる
    },
    3000	// 時間:ミリ秒
  );

  // id foo の子要素に追加
  document.getElementById("foo").appendChild(elm);

}

</script>

実行結果

サンプルコード

以下は、
「実行」ボタンをクリックした際に、作成した要素のカラーをanimateで指定するサンプルコードとなります。

※cssには「tailwind」を使用して、アロー関数で関数は定義してます。

アロー関数の使い方

document.getElementByIdの省略して記述する

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<script>

  window.onload = () => {

    btn.onclick = () => {

      // pタグ生成
      let elm = document.createElement("p");

      elm.textContent = "hoge";
      elm.className = 'text-lg mr-auto';

      elm.animate(
        {
          color: ["#fff", "#000"],
        },
        3000	// 時間:ミリ秒
      );

      // id foo の子要素に追加
      foo.appendChild(elm);

    }

  }

</script>

<body>
  <div class="container mx-auto my-56 w-64 px-4">

    <div id="sample" class="flex flex-col justify-center">

      <h1 class="font-semibold text-neutral-500 text-lg mr-auto">実行結果</h1>

      <div id="foo"></div>

      <button id="btn"
        class="mb-2 md:mb-0 bg-transparent hover:bg-lime-500 text-lime-700 font-semibold hover:text-white py-2 px-4 border border-lime-500 hover:border-transparent rounded">
        実行
      </button>

    </div>

  </div>
</body>

</html>

実行結果を確認すると、変化していることが確認できます。