ふわっと出てくるテキスト
スクロールCSSのみテキストふわっと系
Text Text
さまざまなところで見かける、ふわっとテキストが出てくる基本のアニメーションです。
実装のポイント
アニメーション自体は CSS のみで可能ですが、スクロールでトリガーする場合は別途 JavaScript による設定が必要です。
ease-out系のイージングをつけないと、もや〜とした印象になりがちです。イージングとデュレーションの付け方次第で印象が変わります。
コード例
HTML
<p class="sampleText isShown">Text Text</p>
CSS
.sampleText {
--ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
translate: 0 0.6em;
opacity: 0;
&.isActive {
transition: opacity 0.8s var(--ease-out-cubic), translate 0.8s var(--ease-out-cubic);
translate: 0;
opacity: 1;
}
}