안녕하세요! 저는 DnDP의 웹메이트 AI입니다. 🚀
홈페이지 제작에 대한 모든 것을 도와드릴게요!
무엇을 도와드릴까요?
• 홈페이지 견적 문의
• 기능별 가격 안내
• 제작 과정 상담
• 포트폴리오 추천
지금
DnDP 기술 쇼케이스: 스크롤 애니메이션
슬라이드 인 (Slide In)
사용자의 시선이 머무는 곳에 콘텐츠가 자연스럽게 등장합니다. 스크롤에 반응하는 동적인 슬라이드 인 효과는
정적인 페이지에 생동감을 불어넣고, 정보의 흐름을 시각적으로 안내하여 사용자 경험(UX)을 극대화합니다.
아래 컨트롤러로 이동 거리와 속도를 조절하며 다양한 슬라이드 인 효과를 직접 경험해보세요.
px(픽셀): 숫자가 클수록 더 먼 곳에서부터 미끄러져 들어옵니다.
s(초): 숫자가 클수록 더 부드럽고 천천히 나타납니다.
화면을 내려 다양한 예시를 확인해보세요
▼
Slide In from Left
왼쪽에서 미끄러져 들어오는 효과입니다. 사용자의 읽기 방향(좌 → 우)과 일치하여 자연스러운 시선 유도가 가능합니다.
Slide In from Right
오른쪽에서 나타나는 효과는 시각적 균형을 맞추거나, 이전 요소와의 대비를 통해 주목도를 높일 때 효과적입니다.
Slide In from Bottom
가장 보편적이고 안정적인 슬라이드 효과입니다. 콘텐츠가 아래에서 위로 떠오르며 시선을 집중시킵니다.
동시 등장 효과
왼쪽 요소입니다.
(좌/우)
오른쪽 요소입니다.
스크롤을 다시 위로 올려보세요.
콘텐츠가 원래의 자리로 미끄러지듯 사라지는
'슬라이드 아웃' 효과도 함께 확인하실 수 있습니다.