JavaScriptで作る！回転する円形テキストアニメーション｜初心者でもわかる実装手順付き（コピペ可）

6 min 63 views

「Webサイトに動きを加えたいけど、派手すぎずおしゃれに見せたい」──そんなときにおすすめなのが円形に回転する文字アニメーションです。


今回の記事では、HTML・CSS・JavaScriptの3つだけで作れる「ぐるぐる回る円形テキスト＋ランダム点滅エフェクト」を解説します。


JavaScriptのsetInterval()やMathを活用する練習にもぴったり。

コピペで動かせるサンプル付きなので、初心者の方も安心して試せます！

全体の構造

このアニメーションは、次の3つの要素で構成されています。

構成要素役割
HTMLベースとなる構造（文字を配置する領域を用意）
CSSコンテンツを中央配置・フォント装飾・見た目調整
JavaScript円形配置・回転・ランダム点滅の制御

それでは順に見ていきましょう。

　HTMLの記述方法

HTMLはとてもシンプル。文字を配置するための.text要素だけあればOKです。

<script>タグはdefer属性を付けて、DOM構築後にスクリプトが動くようにしましょう。


これを忘れると .text がまだ存在しない状態でスクリプトが実行されてしまい、動きません。

「.container」＝全体を包む要素。

「.wrapper」＝テキストを中央に配置するための要素。

「.text」＝回転するテキストを格納するための要素。

<script src=”script.js” defer></script>は<body>直下に置くこと。

【HTML】

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css"> 
</head>

<body>
    <script src="script.js" defer></script>
    <div class="container">
        <div class="wrapper">
            <div class="text"></div>
        </div>
    </div>
</body>

</html>

　CSSで中央寄せ＆基本デザイン

全体を中央に配置し、文字が円の中心から放射状に並ぶように設定します。

transform-origin を「50% 100%」にすることで、文字が中心から外に向かって回転するようになります。

「.wrapper」は相対位置を持ち、内部要素を正確に配置するための基点を設定。

「.text」は、中央に配置されるテキスト要素。位置をabsoluteに設定し、中央に配置。

「.text span」は、個々の文字をスタイル設定し、文字が回転するための基点を設定。

「.container」は、全体のコンテナで、中央にコンテンツを配置。

【CSS】

.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;　　　　　　　　/*colorにグラデーションやネオン効果をつけるとポップな印象に。*/   
　　position: absolute;
    transform-origin: 50% 100%;
}

/*コンテンツを中央に*/
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

　JavaScriptでアニメーションを制御

ここが今回のメイン。


1文字ずつ円形に配置し、setInterval()で回転を続けます。


さらにランダムな文字がフェードアウト→フェードインを繰り返すようにして、電飾のような点滅感を演出します。

【JS】

const textWrapper = document.querySelector('.text');
const text = 'ABCDEFGHIJKMLNOPQRSTUVWXYZ';　　　　　　　　//ここの中身を入れ替えると文字が変わる
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);
}

// ランダムなタイミングで文字が点滅する関数
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ミリ秒ごとに透明度を変化させる
    }
}

// 一定の間隔で回転させる
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ミリ秒ごとに回転

// ランダムなタイミングで文字が点滅する
function startFlashing() {
    // 点滅の間隔を調整可能にする
    const flashInterval = 2000;　　　　　　 // 点滅の間隔（ミリ秒）ここを変更するとリズミカルなアニメにも対応できる。
    setInterval(() => {
        flashRandomCharacter();
    }, flashInterval);
}

// 初回の呼び出し
startFlashing();

まとめ

今回紹介した「円形テキストアニメーション」は、JavaScriptのMath関数・座標計算・アニメーション制御を理解する良い練習になります。
見た目のインパクトもあるので、ローディング画面やタイトル演出にもぴったり。
一度動きを確認してみて、自分のサイトデザインに合わせてアレンジしてみましょう！

1冊ですべて身につくJavaScript入門講座 [ Mana ]
created by Rinker
¥2,794 (2025/10/10 16:35:41時点 楽天市場調べ-詳細)

今回使用した主要な HTML / CSS / JavaScript 要素・プロパティ一覧

種類名前説明
HTML要素<div>コンテナ要素。今回の例では .container や .text に使われ、文字を配置する基盤になっている。
<script>JavaScriptを読み込む要素。defer 属性を付けるとDOM構築後に実行されるため安全。
<style>CSSをHTMLに直接書く場合に使用。外部ファイルなら <link> を使う。
CSSプロパティdisplay: flexフレックスボックスレイアウトを有効化。中央寄せや横並び配置がしやすい。
justify-contentフレックスアイテムを水平方向に配置。今回の例では center を指定して中央寄せに。
align-itemsフレックスアイテムを垂直方向に配置。center で縦方向中央寄せ。
position: absolute親要素（relativeなど）を基準に自由に配置できる。文字を円周上に動かすのに必須。
transform要素の位置や回転を変形する。translate()で移動、rotate()で回転。
transform-origin回転や拡大の基準点を設定。50% 100% で「下辺の中央」を基準にした。
opacity不透明度を制御。0=透明、1=完全表示。点滅アニメーションに使用。
JavaScript要素/メソッドdocument.querySelector()指定したセレクタ（例: .text）に一致する最初の要素を取得。
document.createElement()新しい要素（例: <span>）を生成。今回は文字を1文字ずつ配置。
appendChild()子要素を追加。生成した <span> を .text に挿入するのに利用。
setInterval()一定間隔で処理を繰り返す。回転や点滅のアニメーション制御に使用。
Math.cos() / Math.sin()三角関数。円周上のX・Y座標を計算するのに必須。
Math.PI円周率（π）。ラジアン計算に必要。
style.transformJavaScriptからCSSの transform を操作。回転・移動を逐次更新。
style.opacityJavaScriptからCSSの opacity を変更。点滅エフェクトを制御。
関連

JavaScript｜Webサイトにおける動きの必要性とは？

関連

あなたに合うのはどれ？目的別おすすめオンラインスクール比較【2025年最新版】

<PREV
JavaScriptの「addEventListener」イベント一覧をわかりやすく解説
関連記事