자바스크립트 없이 완벽한 CSS 스크롤 애니메이션 만들기

무거운 자바스크립트(JS) 없이 순수 CSS만으로 구현하는 하이엔드 스크롤 애니메이션! 개발 지식이 없어도 바로 복붙해 적용할 수 있는 스크롤 페이드인과 프로그레스 바 완벽 가이드입니다.

하이엔드 CSS 스크롤 UI 디자인. 출처: Tubik Studio

 

🚀 무거운 JS 플러그인은 이제 그만!

여러분, 내 블로그나 웹사이트에 멋진 스크롤 효과를 넣으려고 GSAP 같은 복잡한 자바스크립트 라이브러리를 찾아보다가 포기하신 적 있으신가요?

화려한 인터랙션은 좋지만, 자바스크립트는 페이지 로딩 속도를 느리게 만들고 코드를 복잡하게 만듭니다. 특히 개발 지식이 없는 일반 퍼블리셔나 티스토리 블로거에게는 적용하기조차 쉽지 않죠. 하지만 이제는 순수 CSS만으로도 스크롤에 반응하는 하이엔드 웹 애니메이션을 구현할 수 있는 시대가 열렸습니다. 무거운 스크립트를 덜어내어 사이트는 훨씬 가벼워지고, 코드는 직관적으로 변합니다. 오늘은 단 몇 줄의 CSS 복사-붙여넣기만으로 마법 같은 스크롤 효과를 만드는 방법을 알려드릴게요.

반응형

 

💡 직관적으로 이해하는 스크롤 타임라인(Scroll Timeline)

과거의 CSS 애니메이션은 '시간'을 기준으로 움직였습니다. (예: 2초 동안 서서히 나타나라!) 하지만 최근 도입된 animation-timeline 속성은 '스크롤하는 위치'를 기준으로 애니메이션을 재생합니다.

개발 용어는 빼고 아주 쉽게 설명하자면 이렇습니다:

• Scroll Timeline: 페이지 전체를 얼마나 스크롤했는지 추적합니다. (예: 맨 위부터 맨 아래까지 스크롤하면 프로그레스 바가 0%에서 100%로 찹니다.)
• View Timeline: 특정 요소가 내 화면(뷰포트)에 언제 나타나는지 추적합니다. (예: 화면에 사진이 보이기 시작할 때 서서히 나타나게 만듭니다.)

이 두 가지 원리만 기억하시면, 복잡한 연산이나 자바스크립트 없이 오직 CSS 선언만으로 스크롤과 동기화되는 멋진 UI를 만들 수 있습니다.

스크롤 위치에 따른 콘텐츠 노출 과정

 

💻 복붙해서 바로 쓰는 실전 템플릿

지금 바로 여러분의 블로그나 실무에 적용해 볼 수 있는 가장 유용하고 트렌디한 두 가지 코드를 준비했습니다. HTML이나 JS 수정 없이 CSS 탭에 아래 코드를 그대로 넣기만 하면 됩니다.

 

1) 상단 스크롤 프로그레스 바 (Scroll Progress Bar)

독자가 글을 얼마나 읽었는지 상단에 시각적으로 보여주는 기능입니다.

.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #ff5a5f;
  transform-origin: left;
  scale: 0 1; /* 처음엔 가로 길이를 0으로 둠 */
  
  /* 마법의 두 줄 */
  animation: scroll-progress linear;
  animation-timeline: scroll();
  z-index: 9999;
}

@keyframes scroll-progress {
  to { scale: 1 1; } /* 스크롤 끝까지 가면 가로 100% */
}

 

2) 스크롤 페이드인 효과 (View Fade-in)

글을 읽어 내려갈 때마다 이미지나 텍스트 박스가 아래에서 위로 부드럽게 나타나는 하이엔드 효과입니다. 적용하고 싶은 요소에 .fade-in 클래스만 주면 됩니다.

.fade-in {
  animation: fade-in-up linear;
  animation-timeline: view();
  animation-range: entry 10% cover 30%; /* 화면에 10% 보일때 시작~30% 올라오면 완료 */
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

728x90

 

🎯 하이엔드 퍼블리싱의 완성

복잡한 프로그래밍 언어를 배우지 않아도, 이제 CSS만으로 최고 수준의 웹 퍼블리싱을 경험할 수 있습니다.

다만 한 가지 주의할 점은, animation-timeline 속성이 아직 구형 브라우저(예: 구버전 사파리)에서는 완벽히 지원되지 않을 수 있다는 점입니다. 하지만 최신 크롬과 엣지 등 대다수의 모던 브라우저에서는 환상적으로 작동하며, 지원하지 않는 브라우저에서는 그저 애니메이션 없이 깔끔하게 원본이 노출되므로 사이트가 깨질 염려는 없습니다.

브라우저별 CSS 지원 현황 비교

---