Motion

GSAP을 쓰지 않고 CSS Animation + IntersectionObserver(scroll-reveal.js)만 사용합니다. transform/opacity만 다뤄 GPU 합성으로 처리되고, prefers-reduced-motion을 존중합니다.

Scroll Reveal 4종

아래로 스크롤하며 각 박스가 나타나는 모션을 직접 확인하세요(한 번 나타난 뒤에는 유지됩니다).

스크롤하면 나타납니다

Fade

data-reveal="fade"

opacity만 전환 — 텍스트 블록, Section Header

스크롤하면 나타납니다

Slide Up

data-reveal="up"

opacity + translateY(1.1rem → 0) — 기본값, 대부분의 섹션

스크롤하면 나타납니다

Slide Left

data-reveal="slide-left"

opacity + translateX(-1.5rem → 0) — About/Contact 2단 레이아웃

스크롤하면 나타납니다

Scale

data-reveal="scale"

opacity + scale(.97 → 1) — Card, KPI, 통계 수치

Stagger Group

data-reveal-group — 카드가 순서대로 등장(0/50/100/150/200/240ms, 6번째부터 지연 캡)

1
2
3
4

동작 원리

src/scripts/modules/scroll-reveal.js

  • threshold 0.12 · rootMargin 0px 0px -10% 0px — 화면 하단 10% 지점에서 발동
  • 기본 once:true → 최초 1회 노출 후 unobserve(). AJAX/무한스크롤을 위해 once:false 옵션도 지원
  • transition duration 240ms · easing cubic-bezier(.22,.61,.36,1)(--ease-reveal) — transform/opacity만 사용해 리플로우 없음
  • prefers-reduced-motion: reduce 환경에서는 즉시 is-visible 처리(애니메이션 생략)
  • 키보드 포커스가 아직 보이지 않는 대상에 들어오면 :focus-within으로 즉시 노출

Project

HANSUNG

Version

1.0.0

Stack

Tailwind CSS v4 · HTML5 · Vanilla JavaScript

Last Update

2026-07-18

Build

Tailwind CLI (minified) · No bundler · Static Hosting