텍스트 스크롤 애니메이션

<div class="scrolling-text-container">
    <h1 id="scrolling-text">
        <div>Welcome to NexusLab.</div>
        <div id="text-scroller">
            <div class="text-scroller-item">디지털 혁신을 설계합니다.</div>
            <div class="text-scroller-item">비즈니스에 날개를 달다.</div>
            <div class="text-scroller-item">당신의 브랜드를 성장시키는 힘.</div>
            <div class="text-scroller-item">경험을 디자인합니다.</div>
            <div class="text-scroller-item">가치를 창조합니다.</div>
            <div class="text-scroller-item">가능성을 만듭니다.</div>
            <div class="text-scroller-item">기획부터 디자인까지, 완벽하게.</div>
            <div class="text-scroller-item">아이디어를 현실로.</div>
            <div class="text-scroller-item">브랜드의 내일을 함께 만듭니다.</div>
            <div class="text-scroller-item">비즈니스를 성공으로.</div>
        </div>
        <div>Let's build something great.</div>
    </h1>
</div>

<style>
/* 🔹 Pretendard 폰트 적용 */
@import url('https://cdn.jsdelivr.net/npm/pretendard/dist/web/static/pretendard.css');

/* 🔹 전체 컨테이너 */
.scrolling-text-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50vh;
    text-align: center;
}

/* 🔹 텍스트 스타일 */
#scrolling-text {
    font-family: 'Pretendard', sans-serif;
    font-size: 50px;
    font-weight: 900;
    line-height: 1.2;
    color: #222;
}

/* 🔹 텍스트 스크롤 애니메이션 */
#text-scroller {
    height: 60px;
    overflow: hidden;
    position: relative;
    display: inline-block;
}

.text-scroller-item {
    display: block;
    animation: textScroll 15s infinite ease-in-out;
    text-align: center;
    font-weight: bold;
}

@keyframes textScroll {
    0% { transform: translateY(0); }
    10% { transform: translateY(-60px); }
    20% { transform: translateY(-120px); }
    30% { transform: translateY(-180px); }
    40% { transform: translateY(-240px); }
    50% { transform: translateY(-300px); }
    60% { transform: translateY(-360px); }
    70% { transform: translateY(-420px); }
    80% { transform: translateY(-480px); }
    90% { transform: translateY(-540px); }
    100% { transform: translateY(-600px); }
}

/* 🔹 배경 없음 & 컨테이너 여백 0 적용 */
body {
    background: transparent;
    margin: 0;
    padding: 0;
}
</style>