Viewake화면에 들어오는 요소를 깨우세요.

스크롤 방향을 이해하는 가벼운 등장 애니메이션 라이브러리입니다. 예측 가능한 once·replay 모드와 CDN, React, Next.js, Vue를 지원합니다.

시작하기

replay 이해하기

애니메이션은 CSS가 담당

JavaScript는 data-viewake-state 속성만 바꿉니다. 새 애니메이션은 CSS만으로 추가합니다.

방향을 이해하는 replay

화면 위로 지나간 콘텐츠는 숨기지 않고, 요소가 화면 아래에 있을 때만 안전하게 재설정합니다.

어디서든 같은 방식

일반 HTML과 CDN, React, Next.js, Vue가 하나의 작은 프레임워크 독립 코어를 공유합니다.

접근성을 고려한 기본값

JavaScript가 실패해도 콘텐츠는 보이며 모션 감소 설정을 자동으로 존중합니다.

SSR 안전

모듈을 평가할 때 window나 document에 접근하지 않아 서버 렌더링 프로젝트에서도 안전하게 불러옵니다.

gzip 약 2KB

IntersectionObserver와 두 상태의 상태 머신, CSS transition만으로 동작합니다.

LIVE PLAYGROUND

마술이 아니라 상태 흐름을 직접 확인하세요.

애니메이션 모드 지연 시간 재생 시간 가속 곡선 실행 지점

뷰포트직접 스크롤하거나 버튼을 사용하세요.

아래에서 sleeping 중 ↓

fade-up · replay · 200ms + 600ms

이제 awake 상태입니다.

요소를 지나친 뒤 위로 돌아갔다 다시 내려오며 모드를 비교하세요.

계속 내려가도 화면 위의 카드는 awake 상태를 유지합니다.

현재 설정 코드

<div data-viewake="fade-up" data-viewake-mode="replay" data-viewake-delay="200" data-viewake-duration="600" data-viewake-easing="cubic-bezier(0.22, 1, 0.36, 1)">

threshold: 0.25는 Viewake.init({ threshold: 0.25 })에 넣습니다.

아래로 내려가 카드를 깨웁니다.
카드가 화면 위로 지나갈 때까지 더 내립니다.
맨 위로 돌아가 카드를 화면 아래에 둡니다.
다시 아래로 내려갑니다.

이벤트

움직임을 기다리는 중…