順番に下から出てくるテキスト
概要
1文字ずつ順番に下から出てくるテキストです。
段落pタグにoverflow: hidden;をつけ、ラッパーとしての役割を持たせて子要素のテキストはデフォルトではtranslateYでpタグ外に出すことで、デフォルトでは表示されない状況を作っています。
スクロールトリガーによって、ラッパーにis-activeが付くことでテキストのtranslateY(0)となり、下からむにゅっと出てくるようにしています。
ドットのアニメーションと同様に1文字ずつspanタグで囲み、インデックス番号を--indexにつけ、スライドするtransitionのタイミングをずらすことで、順番に出てくる表現をしています。
コードサンプル
HTML
<p class="order-slide-text js-scroll-anim">
<span style="--index: 0;">T</span>
<span style="--index: 1;">E</span>
<span style="--index: 2;">X</span>
<span style="--index: 3;">T</span>
</p>CSS
.order-slide-text {
overflow: hidden;
line-height: 1;
}
.order-slide-text span {
--index: 0; /* インデックスのデフォルト値 */
display: inline-block;
transform: translateY(1.2em);
}
.order-slide-text.is-active span {
transition: transform 0.6s ease-in-out;
transition-delay: calc(var(--index) * 0.1s);
transform: translateY(0);
}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);
});
});