. テキストが円形に回転しながら点滅するアニメーションを作成しよう！[CSS + JavaScript]
テキストが円形に回転しながら点滅するアニメーションを作成しよう！[CSS + JavaScript]
テキストが円形に回転しながら点滅するアニメーションを作成しよう！[CSS + JavaScript]

テキストが円形に回転しながら点滅するアニメーションを作成しよう！[CSS + JavaScript]

4,925 文字 約 13 分で読めます

今回は、JavaScriptとCSSを使って、テキストが円の外周に沿って表示されかつ回転しながらランダムに点滅するアニメーションを作成する方法をご紹介します。サイトのロード画面や、文字を変えればちょっと目を引きたいところに設置するアイキャッチ的な要素として活躍しますので、興味のある方は是非！

See the Pen Rotating_Animation_2 by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.

目次
  1. HTMLとCSSの準備
  2. JavaScriptでアニメーションを実装
  3. メリット・デメリット
  4. まとめ

HTMLとCSSの準備

まず、HTMLとCSSを設定します。以下のコードを使って、中央にテキストを配置するための基本的なスタイルを設定します。

HTML <div class="container"> <div class="wrapper"> <div class="text"></div> </div> </div>

このHTMLコードは、アニメーションのコンテナを設定します。「.container」は全体を包む要素で、「.wrapper」はテキストを中央に配置するための要素で「.text」は、回転するテキストを格納するための要素になってます。

HTMLはたったこれだけでOKです。「テキストはどこにいれるの？」と思った方もいるかと思います。テキストはHTML内に入力するのではなく、後から紹介するjavascriptの方に入力します。

CSS <style> .wrapper { position: relative; } .text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; justify-content: center; width: 0; height: 0; } .text span { font-size: 24px; font-weight: bold; color: #333; position: absolute; transform-origin: 50% 100%; } .container { display: flex; justify-content: center; align-items: center; height: 100vh; } </style>

このCSSコードは、テキストを中央に配置するためのスタイルを定義しています。

  • 「.wrapper」は相対位置を持ち、内部要素を正確に配置するための基点となります。
  • 「.text」は、中央に配置されるテキスト要素で、位置を絶対に設定し、中央に配置されるように変換します。
  • 「.text span」は、個々の文字をスタイル設定し、文字が回転するための基点を設定します。
  • 「.container」は、全体のコンテナで、中央にコンテンツを配置します。

JavaScriptでアニメーションを実装

次に、JavaScriptを使ってテキストを円形に配置し、回転させるアニメーションを実装します。

テキストを円形に配置 const textWrapper = document.querySelector('.text'); const text = 'NowLoading'; const radius = 120; // 円の半径 const angleIncrement = (2 * Math.PI) / text.length; // 文字間の角度の増分 let rotationAngle = 0; // 回転角度 // テキストを配置 for (let i = 0; i < text.length; i++) { const span = document.createElement('span'); span.textContent = text[i]; textWrapper.appendChild(span); }

ここでは、「.text」という要素に「NowLoading」というテキストをspan要素として追加し、円形に配置しています。

テキストを回転させる // 一定の間隔で回転させる setInterval(() => { rotationAngle += Math.PI / 180; // 1度ずつ回転 for (let i = 0; i < text.length; i++) { const angle = angleIncrement * i + rotationAngle; const x = radius * Math.cos(angle); const y = radius * Math.sin(angle); const rotation = angle + Math.PI / 2; textWrapper.children[i].style.transform = `translate(-50%, -50%) translate(${x}px, ${y}px) rotate(${rotation}rad)`; } }, 30); // 30ミリ秒ごとに回転

こちらのコードで、テキストが円形に回転するアニメーションを実現しています。30ミリ秒ごとに少しずつ回転角度を増やしていきます。

文字をランダムに点滅させる // ランダムなタイミングで文字が点滅する関数 function flashRandomCharacter() { const randomIndex = Math.floor(Math.random() * text.length); // ランダムな文字のインデックスを選択 const randomChar = textWrapper.children[randomIndex]; // 徐々に透明度を変化させる let opacity = 1; const fadeOutInterval = setInterval(() => { opacity -= 0.1; // 透明度を徐々に減少させる randomChar.style.opacity = opacity; if (opacity <= 0) { clearInterval(fadeOutInterval); // 透明度が0以下になったらタイマーを停止 // 0.1秒後に透明度を元に戻す setTimeout(() => { fadeIn(); }, 100); } }, 50); // 50ミリ秒ごとに透明度を変化させる // 透明度を元に戻す function fadeIn() { let opacity = 0; const fadeInInterval = setInterval(() => { opacity += 0.1; // 透明度を徐々に増加させる randomChar.style.opacity = opacity; if (opacity >= 1) { clearInterval(fadeInInterval); // 透明度が1以上になったらタイマーを停止 } }, 50); // 50ミリ秒ごとに透明度を変化させる } } // ランダムなタイミングで文字が点滅する function startFlashing() { // 点滅の間隔を調整可能にする const flashInterval = 2000; // 点滅の間隔（ミリ秒） setInterval(() => { flashRandomCharacter(); }, flashInterval); } // 初回の呼び出し startFlashing();

こちらでは、文字がランダムに点滅するアニメーションを実現しています。ランダムに選ばれた文字が徐々に透明になり、再び表示されるまでの過程を繰り返します。

点滅の透明度を変化させたい場合は「// 徐々に透明度を変化させる」以下にあるコードの数値を修正してください。

文字が点滅させるタイミングを変更させたい場合は「// ランダムなタイミングで文字が点滅する」以下にある数値をお好みに修正してください。

メリット・デメリット

メリット

視覚的な楽しさ

このアニメーションは、プロジェクトのロード画面などで使うことで、ユーザーに視覚的な楽しさを提供できます。動きのあるコンテンツは、ユーザーの注意を引きやすくなります。

インタラクティブな要素

ランダムに点滅する文字は、単調になりがちなロード画面にインタラクティブな要素を追加し、ユーザーの興味を引き続ける効果があります。

カスタマイズ可能

アニメーションの設定（回転速度、半径、点滅間隔など）を簡単にカスタマイズできるため、さまざまな用途やデザインに合わせて調整可能です。

デメリット

パフォーマンスへの影響

複雑なアニメーションは、特に低スペックのデバイスではパフォーマンスに影響を与える可能性があります。フレームレートが低下すると、滑らかなアニメーションが実現できなくなることがあります。

互換性の問題

一部の古いブラウザでは、CSS3やJavaScriptの新しい機能がサポートされていない場合があります。互換性の問題を避けるために、フォールバックを考慮する必要があります。

視覚的な負担

長時間見続けると、回転するアニメーションが視覚的な負担となる場合があります。特に、点滅する効果が強すぎると、ユーザーに不快感を与える可能性があるため、適切なバランスが求められます。

まとめ

以上で、テキストが円形に回転しながらランダムに点滅するアニメーションが完成です。このアニメーションは、サイトのロード画面などで使うことで、視覚的な楽しさを提供できますので興味がある方はお試しください。

📎📎📎📎📎📎📎📎📎📎