Cinema Reveal Text
GSAPで1文字ずつマスクの下から浮かび上がる映画のオープニング風テキスト演出。
HTML
<div class="crt-wrap" id="crt-wrap"> <span class="crt-line" id="crt-line">CINEMATIC</span> </div>
CSS
.crt-wrap {
overflow: hidden;
padding: 8px 0;
}
.crt-line {
display: inline-block;
font-size: 42px;
font-weight: 900;
letter-spacing: 6px;
color: #f8fafc;
}
.crt-char {
display: inline-block;
opacity: 0;
transform: translateY(100%);
}
JavaScript
const line = document.getElementById('crt-line');
const text = line.textContent;
line.textContent = '';
text.split('').forEach(function(ch) {
const span = document.createElement('span');
span.classList.add('crt-char');
span.textContent = ch === ' ' ? '\u00A0' : ch;
line.appendChild(span);
});
gsap.to('.crt-char', {
opacity: 1,
y: 0,
duration: 0.6,
stagger: 0.05,
ease: 'power3.out',
delay: 0.3
});