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

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

<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>

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);
}

// 一定の間隔で回転させる
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 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();