タイプライター風テキストアニメーション

2025/02/17 Javascript

参考サイト

【https://life.job-draft.jp/】では1文字ずつ表示させるだけでなく、1行表示したらその次の行を表示する前での間に、少し行を上に移動させています。

Javascript

<script>
document.addEventListener("DOMContentLoaded", function() {
    const textElement = document.querySelector("#text span");
    const text = textElement.textContent;
    textElement.textContent = "";

    // 1文字ずつspanタグで囲む
    text.split("").forEach(char => {
        let span = document.createElement("span");
        span.textContent = char;
        span.classList.add("hidden");
        textElement.appendChild(span);
    });

    gsap.to("#text span", {
        opacity: 1,
        duration: 0.15,
        stagger: 0.05,  // 1文字ずつ0.05秒間隔で表示
        ease: "power1.out"
    });

});
</script>

HTML

<div id="text">
    <span>GSAPでタイプライター風アニメーション！</span>
</div>

CSS

.hidden {
    opacity: 0;
}

BACK