1文字ずつでてくるテキスト
スクロールCSSのみJavaScriptテキストふわっと系
1文字ずつ下からでてくるテキストアニメーションです。大見出しの出現アニメーションなどに適しています。
実装のポイント
1文字ずつ<span>タグで区切り、--indexCSS変数でディレイをかけながらtranslateプロパティで下から出現させています。ラッパーの.sampleText要素にはovheflow: hiddenをかけてはみ出ている部分を見せないようにしています。
コード例
HTML
<p class="sampleText">
<span style="--index: 0" class="character">T</span
><span style="--index: 1" class="character">e</span
><span style="--index: 2" class="character">x</span
><span style="--index: 3" class="character">t</span>
</p>
CSS
.sampleText {
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
overflow: hidden;
line-height: 1;
.character {
display: inline-block;
translate: 0 1.3em;
}
&.isActive {
.character {
transition: translate 0.7s var(--ease-out-quart);
transition-delay: calc(0.12s * var(--index));
translate: 0;
}
}
}
上級編
1文字ずつdisplay: inline-blockで区切る関係上、カーニングが消失してしまうのが欠点です。特に欧文では顕著に目立ちます。そこで、カーニングを考慮した文字幅を<span>タグに挿入するJavaScriptを使えばこの問題を解消できます。
詳しくは下記の記事で解説しています。
カーニングを維持したまま1文字ずつinline-blockのspanタグで区切る
HTML
<p class="sampleText">Text</p>
CSS
.sampleText {
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
overflow: hidden;
line-height: 1;
.character {
display: inline-block;
translate: 0 1.3em;
}
&.isActive {
.character {
transition: translate 0.7s var(--ease-out-quart);
transition-delay: calc(0.12s * var(--index));
translate: 0;
}
}
}
JavaScript
import { splitTextWithKerning } from "PATH/TO/splitTextWithKerning.js";
const element = document.querySelector(".sampleText");
const setup = async () => {
await splitTextWithKerning(element, "character", true);
};
window.addEventListener("DOMContentLoaded", () => {
setup();
});
splitTextWithKerningの関数を用いてカーニング済みの幅を適用することでカーニングを維持できます。ただこちらの手法はある程度JavaScriptなどの理解度が必要になります。