아임웹 스크롤 텍스트 애니메이션 만들기 | 등장하는 타이포그래피 커스텀 코드

 

아임웹 스크롤 텍스트 애니메이션 만들기

홈페이지 첫 화면에서 강렬한 브랜드 메시지를 전달하고 싶다면 단순한 텍스트보다

스크롤과 연동되는 애니메이션을 활용하는 것이 효과적입니다.

 

이번에 소개하는 코드는 사용자가 스크롤을 내릴 때 문장이 한 줄씩 자연스럽게 등장하는 인터랙션 효과입니다.

특히 브랜드 홈페이지, 기업 사이트, 스포츠 브랜드, 프리미엄 서비스 홈페이지 등에서 활용하기 좋으며

아임웹 코드 위젯에 그대로 붙여넣어 사용할 수 있습니다.

 

실제 구현 예시

https://meztahstudio.imweb.me/35

믓아 스튜디오

---

 

이 코드로 구현되는 기능

이 커스텀 코드를 적용하면 다음과 같은 효과를 만들 수 있습니다.

✔ 스크롤에 따라 텍스트 순차 등장

✔ 아래에서 위로 올라오는 모션

✔ 부드러운 Fade In 효과

✔ 특정 문장만 포인트 컬러 적용 가능

✔ 스크롤 구간 동안 화면 중앙 고정

✔ 브랜드 슬로건 강조

사용자는 단순히 글을 읽는 것이 아니라 자연스럽게 메시지에 집중하게 됩니다.

---

 

사용하면 좋은 상황

• 브랜드 홈페이지
• 회사 비전이나 슬로건 강조
• 스포츠 브랜드
• 강렬한 메시지 전달
• 병원 홈페이지
• 신뢰감을 주는 핵심 문구 노출
• 법률사무소 홈페이지
• 전문성을 보여주는 문장 강조
• 랜딩페이지
• 전환율을 높이는 핵심 메시지 노출

특히 아임웹 홈페이지 제작 시 메인 비주얼 다음 섹션에 배치하면 완성도가 높아집니다.

---

 

적용 방법

1. 아임웹 접속
2. 코드 위젯 추가
3. 아래 전체 코드 붙여넣기
4. 텍스트 문구 수정
5. 저장 후 확인

별도 라이브러리 없이 HTML/CSS/JS만으로 동작합니다.

---

 

전체 코드

<section class="mzt-scroll-section">
  <div class="mzt-scroll-sticky">

    <div class="mzt-scroll-title">
      <div class="mzt-scroll-line">BUILT AROUND REAL</div>
      <div class="mzt-scroll-line mzt-scroll-blue">
        SPORTS ENVIRONMENTS
      </div>
      <div class="mzt-scroll-line">EUUMSPORTS</div>
    </div>

  </div>
</section>

<style>
.mzt-scroll-section{
  position:relative;
  width:100%;
  height:240vh;
}

.mzt-scroll-sticky{
  position:sticky;
  top:0;
  width:100%;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

.mzt-scroll-title{
  width:100%;
  text-align:center;
  font-family:Pretendard,sans-serif;
  font-weight:800;
  font-size:clamp(42px,6vw,92px);
  line-height:1.08;
  letter-spacing:-0.04em;
  padding:0 30px;
  box-sizing:border-box;
}

.mzt-scroll-line{
  color:#ffffff;
  opacity:0;
  transform:translateY(60px);
  will-change:opacity, transform;
}

.mzt-scroll-blue{
  color:#0057ff;
  background:none !important;
  box-shadow:none !important;
}

.mzt-scroll-line + .mzt-scroll-line{
  margin-top:8px;
}

@media (max-width:768px){

  .mzt-scroll-section{
    height:220vh;
  }

  .mzt-scroll-title{
    font-size:clamp(34px,11vw,56px);
    line-height:1.12;
  }
}
</style>

<script>
(function(){

  const section = document.querySelector(".mzt-scroll-section");
  const lines = document.querySelectorAll(".mzt-scroll-line");

  if(!section || !lines.length) return;

  function clamp(v,min,max){
    return Math.min(Math.max(v,min),max);
  }

  function motion(){

    const rect = section.getBoundingClientRect();
    const sectionStart = window.innerHeight - rect.top;

    const triggerPoint = window.innerHeight;

    let progress = clamp(
      (sectionStart - triggerPoint) / (section.offsetHeight * 0.45),
      0,
      1
    );

    lines.forEach((line,index)=>{

      const start = index * 0.22;
      const end = start + 0.22;

      const p = clamp(
        (progress - start) / (end - start),
        0,
        1
      );

      line.style.opacity = p;
      line.style.transform =
        `translateY(${60 - (60 * p)}px)`;
    });
  }

  let ticking = false;

  window.addEventListener("scroll",()=>{

    if(!ticking){

      requestAnimationFrame(()=>{
        motion();
        ticking = false;
      });

      ticking = true;
    }

  },{ passive:true });

  window.addEventListener("resize",motion);

  motion();

})();
</script>

---

 

코드 수정 포인트

1. 텍스트 변경

<div class="mzt-scroll-line">원하는 문구</div>

문구만 바꾸면 됩니다.

 

2. 포인트 컬러 변경

현재 파란색

.mzt-scroll-blue{
  color:#0057ff;
}

원하는 브랜드 컬러로 수정 가능합니다.

 

3. 글자 크기 변경

font-size:clamp(42px,6vw,92px);

숫자를 조절하면 됩니다.

 

4. 스크롤 길이 변경

height:240vh;

값이 커질수록 애니메이션 구간이 길어집니다.

---

자주 발생하는 오류와 해결 방법

1. 텍스트가 보이지 않아요

초기 상태가 opacity:0으로 설정되어 있습니다.

스크립트가 정상적으로 삽입되었는지 확인해보세요.

 

2. 모바일에서 글자가 너무 커요

아래 부분 숫자를 줄여주세요.

font-size:clamp(34px,11vw,56px);

 

 

3. 애니메이션이 동작하지 않아요

HTML, CSS, JS 전체를 함께 붙여넣어야 정상 동작합니다.

코드 일부만 넣으면 작동하지 않을 수 있습니다.

 

4. 배경이 흰색인데 글자가 안 보여요

현재 텍스트 색상이 흰색으로 설정되어 있습니다.

color:#ffffff;

검정색 등 원하는 색상으로 변경해 주세요.

---

 

텍스트 한 줄만 바뀌어도 홈페이지의 첫인상은 크게 달라집니다.

이번 스크롤 텍스트 애니메이션은 복잡한 라이브러리 없이 HTML, CSS, JS만으로 구현할 수 있으며,

아임웹 홈페이지 제작 시 브랜드 메시지를 더욱 강하게 전달할 수 있는 효과적인 커스텀 코드입니다.

홈페이지 제작이나 웹디자인 작업 시 단순한 텍스트보다 인터랙션 요소를 추가해 사용자의 집중도를 높여보세요.

 

홈페이지 제작 상담문의

믓아 스튜디오

 

풀페이지 슬라이드 만들기

https://meztahstudio.tistory.com/20