스크롤 속도
0
인터랙티브 애니메이션
스크롤 속도 연동
(Scroll Velocity Linked)
스크롤 속도 연동은 사용자의 스크롤 속도에 따라 요소들이 동적으로 반응하는 인터랙티브 애니메이션입니다.
빠르게 스크롤할 때는 요소들이 더 크게 변화하고, 천천히 스크롤할 때는 부드럽게 움직입니다.
아래 컨트롤러로 반응 강도와 최대 변화량을 조절하며 다양한 스크롤 연동 효과를 직접 경험해보세요.
스크롤 속도에 대한 요소들의 반응 강도를 조절합니다. 숫자가 클수록 더 민감하게 반응합니다.
요소들이 변화할 수 있는 최대 크기를 설정합니다. 숫자가 클수록 더 크게 변화합니다.
요소들이 회전할 수 있는 최대 각도를 설정합니다. 숫자가 클수록 더 크게 회전합니다.
화면을 다양한 속도로 스크롤하며 효과를 확인해보세요
▼기본 텍스트 스크롤 연동
스크롤 속도에 반응하는 텍스트 -DnDp-
대형 텍스트 스크롤 연동
동적인 웹 경험
그라데이션 텍스트 스크롤 연동
아름다운 그라데이션 효과
이미지 스크롤 연동
이미지 + 텍스트 조합 스크롤 연동
스크롤과 함께 움직이는 텍스트
이미지와 텍스트가 함께 스크롤 속도에 반응하여 더욱 풍부한 인터랙티브 경험을 제공합니다.
대형 이미지 오버레이 스크롤 연동
카드 스타일 스크롤 연동
반응형 카드 요소
스크롤 속도에 따라 동적으로 변화하는 카드입니다.
다중 요소 그리드 스크롤 연동
첫 번째 요소
각각의 그리드 아이템이 독립적으로 스크롤 속도에 반응합니다.
두 번째 요소
다양한 변화 패턴으로 풍부한 시각적 효과를 만들어냅니다.
세 번째 요소
사용자의 스크롤 패턴에 따라 실시간으로 반응합니다.
호버 효과와 함께하는 스크롤 연동
마우스를 올려보세요
스크롤 연동과 호버 효과가 결합된 인터랙티브 요소입니다.
호버 시 추가적인 변화가 적용됩니다.