一文字ずつフェードインアニメーション
よく見かけるテキストアニメーションのサンプルです。スクロール監視などと組み合わせていい感じに活用できそう。
See the Pen 文字アニメーション by __m-sato__ (@__m-sato__) on CodePen.
サンプルコード
script.js
document.addEventListener('DOMContentLoaded', function() {
const el = document.querySelector('.animate-title');
const str = el.innerHTML.trim() // -> trim()メソッドで、文字列の両端の空白を削除した文字列を格納
let concatStr = ''; // -> for文でタグ付与されたものを格納する変数を用意
for(let c of str) {
c = c.replace(/\s+/, ' ') // -> replace()メソッドで文字列の中の半角スペースを実態参照に置換し新しい文字列として返す。
concatStr += `<span class="char">${c}</span>`; // -> 文字列にクラス付与加工して結合
}
el.innerHTML = concatStr; // -> 文字列にクラス付与加工した要素を、html要素に代入
const btn = document.querySelector('button');
btn.addEventListener('click', () => {
el.classList.add('inview');
});
el.addEventListener('animationend', () => {
setTimeout(function() {
el.classList.remove('inview');
},900)
})
})
for...of
for(let c of str) {
c = c.replace(/\s+/, ' ') // -> replace()メソッドで文字列の中の半角スペースを実態参照に置換し新しい文字列として返す。
concatStr += `<span class="char">${c}</span>`; // -> 文字列にクラス付与加工して結合
}
el.innerHTML = concatStr;
取得した要素をfor...ofで一文字ずつクラス付与加工してループ。それを新しい要素として代入しています。
半角スペースが渡ってくる場合は実体参照に置き換えて正常に描画されるようにしています。