이미지와 함께하는 스크롤 애니메이션으로 더욱 풍부한 시각적 경험을 제공합니다.
인터랙티브 애니메이션
스크롤 트리거 애니메이션
(Scroll Trigger Animation)
스크롤 트리거 애니메이션은 사용자가 페이지를 스크롤할 때 요소들이 화면에 나타나면서 다양한 애니메이션 효과를 보여주는 기술입니다.
사용자의 스크롤 동작에 반응하여 텍스트, 이미지, 카드 등의 요소들이 자연스럽게 등장하며 웹사이트에 생동감을 더합니다.
아래 컨트롤러로 애니메이션 지속시간과 지연시간을 조절하며 다양한 스크롤 트리거 효과를 직접 경험해보세요.
s(초): 애니메이션이 실행되는 시간을 조절합니다. 숫자가 클수록 더 천천히 애니메이션됩니다.
s(초): 애니메이션이 시작되기 전 대기 시간을 조절합니다. 스태거 효과에 영향을 줍니다.
화면을 내려 다양한 예시를 확인해보세요
▼기본 페이드업 애니메이션
안녕하세요! 스크롤 트리거 애니메이션입니다. -DnDp-
대형 텍스트 스케일 애니메이션
혁신적인 웹 경험을 DnDp에서 만들어보세요
코드 스타일 좌측 등장
function createAwesomeWebsite() { return 'Amazing User Experience'; }
그라데이션 텍스트 회전 애니메이션
아름다운 그라데이션 효과 -DnDp-
이미지 + 텍스트 우측 등장
대형 이미지 오버레이 플립 애니메이션
강력한 시각적 임팩트
카드 스타일 + 호버 효과 (마우스를 올려보세요)
카드 형태의 스크롤 애니메이션 + 호버 효과
다중 라인 스태거 애니메이션
첫 번째 줄의 스크롤 애니메이션입니다. 두 번째 줄도 순차적으로 나타납니다. 마지막 줄까지 자연스럽게 이어집니다.
스태거 카드 그리드 애니메이션
카드 1
카드 2
카드 3
카드 4