이미지와 함께하는 뷰포트 애니메이션으로 더욱 풍부한 시각적 경험을 제공합니다.
인터랙티브 애니메이션
뷰포트 기반 애니메이션
(Viewport Based Animation)
뷰포트 기반 애니메이션은 요소가 사용자의 화면(뷰포트)에 진입할 때 자동으로 실행되는 애니메이션 기술입니다.
스크롤 위치에 따라 다양한 시각적 효과가 적용되어 사용자에게 몰입감 있는 웹 경험을 제공합니다.
아래 컨트롤러로 애니메이션 지속시간과 트리거 임계값을 조절하며 다양한 뷰포트 기반 애니메이션을 직접 경험해보세요.
s(초): 애니메이션이 실행되는 시간을 조절합니다. 숫자가 클수록 더 천천히 애니메이션됩니다.
%: 요소가 뷰포트에 얼마나 들어왔을 때 애니메이션을 시작할지 설정합니다.
화면을 내려 다양한 예시를 확인해보세요
▼기본 페이드인 애니메이션
안녕하세요! 뷰포트 기반 애니메이션입니다. -DnDp-
대형 텍스트 줌인 애니메이션
혁신적인 웹 경험을 DnDp에서 만들어보세요
그라데이션 텍스트 회전 애니메이션
아름다운 그라데이션 효과 -DnDp-
이미지 + 텍스트 우측 슬라이드
대형 이미지 오버레이 X축 플립 애니메이션
강력한 시각적 임팩트
카드 스타일 바운스 + 호버 효과 (마우스를 올려보세요)
카드 형태의 뷰포트 애니메이션 + 호버 효과
다중 라인 Y축 플립 애니메이션
첫 번째 줄의 뷰포트 애니메이션입니다. 두 번째 줄도 함께 플립됩니다. 마지막 줄까지 자연스럽게 이어집니다.
글로우 효과 + 펄스 애니메이션
빛나는 글로우 효과와 펄스 애니메이션
스태거 카드 그리드 애니메이션
카드 1
카드 2
카드 3
카드 4