JSFiddle - React, Tailwind, and code Playground

by learningforever

HTML

<div class="editor-p">
    <span class="highlight-text">파리 올림픽이 낳은 최고 스타이면서 광고계가 탐내는 모델로 떠오른 신유빈을 빙그레가 가장 먼저 붙잡을 수 있었던 섭외의 시작이었다.</span>
</div>

CSS

.highlight-text {
    display: inline-block;
    white-space: nowrap;
}

.highlight-text .char {
    display: inline-block;
    position: relative;
    opacity: 0;
    animation: highlight-animation 0.05s forwards;
    animation-delay: calc(var(--char-index) * 0.05s);
}

.highlight-text .char::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: rgba(255, 117, 111, 0.4);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.1s ease-in-out;
}

.highlight-text .char.visible::after {
    transform: scaleX(1);
}

@keyframes highlight-animation {
    to {
        opacity: 1;
    }
}

JavaScript

window.addEventListener('load', function() {
    const textElement = document.querySelector('.highlight-text');
    const text = textElement.textContent;
    textElement.textContent = ''; // 기존 텍스트 지우기

    Array.from(text).forEach((char, index) => {
        const span = document.createElement('span');
        span.textContent = char;
        span.classList.add('char');
        span.style.setProperty('--char-index', index);
        textElement.appendChild(span);
    });

    // 애니메이션 적용
    setTimeout(() => {
        document.querySelectorAll('.highlight-text .char').forEach((element) => {
            element.classList.add('visible');
        });
    }, 100);
});