ぬるっと出てくるテキスト
テキストが1文字ずつぬるっと出てくるテキストです。
落ち着いたアニメーションなので、上品な印象になります。
clip-pathにて1文字ずつ出てくる様子を表現しています。clip-pathで要素の面積をゼロにするとJavaScriptのIntersectionObserverで監視ができないので、.text自体にはclip-pathをつけず、@keyframes内でclip-pathの伸縮を定義しています。
コードサンプル
HTML
<p class="text js-scroll-anim">TEXT TEXT</p>CSS
.text {
display: inline-block;
opacity: 0;
}
.text.is-active {
animation: smoothly 1s;
animation-fill-mode: forwards;
}
@keyframes smoothly {
0% {
clip-path: inset(0 100% 0 0);
opacity: 1;
}
100% {
clip-path: inset(0);
opacity: 1;
}
}JavaScript
document.addEventListener("DOMContentLoaded", function () {
const scrollTriggers = document.querySelectorAll(".js-scroll-anim");
const revealObserver = new IntersectionObserver(
entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add("is-active");
revealObserver.unobserve(entry.target);
}
});
},
{
threshold: 0.1,
}
);
scrollTriggers.forEach(el => {
revealObserver.observe(el);
});
});