一文字ずつ下から上に上がってくるテキストアニメーション実装方法（JS/CSS）jQueryなし

2024年9月13日

当サイトには広告が含まれています。

テキストが一文字ずつ出てくるテキストアニメーションを実装します。CSSアニメーションを調整・カスタマイズすることで、どんな動きにも変更することができます。スクロールして可視領域に入ったら動きます。
jQueryは使用していません。

サンプル

See the Pen Untitled by ERI Sugai (@gorogoroworks) on CodePen.

スクロールしたらanime-up要素にdisplayedというクラス名が付与され、それにあたるCSSアニメーションが動くという内容になっています。
jsで一文字ずつspanで囲ってるって感じです。

具体的なコード

html

HTML

<dvi class="anime-up">Animations</div>

※半角スペースは表示されなくなるため、使用したいときはHTMLの特殊文字である   を使用する

CSS

CSSアニメーションで動きを指定しています。

CSS

/*text animetions*/
@keyframes showTextFromBottom{
  0%{
    transform: translateY( 100% );
  }
  100%{
    transform: translateY( 0px );
  }
}
.anime-up.displayed span{
  animation: showText 1s backwards;
  display: inline-block;
}
.anime-up.displayed > span{
  overflow: hidden;
}
.anime-up.displayed > span > span{
  animation: showTextFromBottom 0.5s backwards;
}

JavaScript

jsではスクロールしたらクラス名を付与するのと、一文字ずつspanで囲むという処理を行なっています。
jQueryに依存していない、純粋なJavaScript（Vanilla JavaScript）です。

JavaScript

//スクロールしたらクラス名を付与
document.addEventListener("DOMContentLoaded", () => {
    const objects = document.querySelectorAll('.anime-up');

    const cb = function(entries, observer) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('displayed');
                observer.unobserve(entry.target);
            }
        });
    };

    const options = {
        root: null,
        rootMargin: "0px",
        threshold: 0
    };

    const io = new IntersectionObserver(cb, options);

    objects.forEach(object => {
        io.observe(object);
    });
});

//一文字ずつspanで囲む
const animationTargetElements = document.querySelectorAll(".anime-up");
	for( let i =0; i < animationTargetElements.length; i++ ){
		const targetElement = animationTargetElements[i]
		texts = targetElement.textContent;
		textsArray = [];

		targetElement.textContent = "";


		for(let j =0; j < texts.split("").length; j++){
			textsArray.push('<span><span style="animation-delay: '+ ((j+12) * 0.05) +'s" >' + texts.split("")[j] + '<span></span>')
		}
		for(let k =0; k < textsArray.length; k++){
			targetElement.innerHTML += textsArray[k];
		}
	}