스크롤 인터렉션 컴포넌트
스크롤에 반응하는 다양한 인터렉션 컴포넌트 모음입니다.
Scroll Down
1. Scroll Reveal 컴포넌트
요소가 뷰포트에 들어올 때 다양한 애니메이션 효과를 제공합니다.
Fade In Up
아래에서 위로 페이드 인
반복: 한 번만Fade In Left
왼쪽에서 오른쪽으로 페이드 인
반복: 매번Fade In Right
오른쪽에서 왼쪽으로 페이드 인
반복: 보일 때만Zoom In
확대되면서 나타나는 효과
반복: 한 번만🔄 반복 모드 옵션
data-repeat="once"
한 번만 실행 (기본값)
data-repeat="always"
뷰포트에 들어올 때마다 실행
data-repeat="visible"
처음 보일 때만, 나갈 때 숨김
<!-- 기본 사용법 (한 번만 실행) -->
<site-scroll-reveal data-animation="fadeInUp">
<div class="content">애니메이션될 콘텐츠</div>
</site-scroll-reveal>
<!-- 반복 모드 설정 -->
<site-scroll-reveal
data-animation="fadeInLeft"
data-repeat="always">
<div class="content">매번 실행</div>
</site-scroll-reveal>
<site-scroll-reveal
data-animation="zoomIn"
data-repeat="visible">
<div class="content">보일 때만 실행</div>
</site-scroll-reveal>
<!-- 고급 설정 -->
<site-scroll-reveal
data-animation="slideInUp"
data-duration="0.8s"
data-delay="0.2s"
data-threshold="0.3"
data-repeat="once">
<div class="content">고급 설정 콘텐츠</div>
</site-scroll-reveal>
<!-- 애니메이션: fadeIn, fadeInUp, fadeInDown, fadeInLeft, fadeInRight, zoomIn, slideInUp, slideInLeft -->
<!-- 반복 모드: once(기본), always, visible -->스크롤하여 다음 컴포넌트를 확인하세요
2. Parallax 컴포넌트
스크롤에 따라 요소가 다른 속도로 움직이는 패럴랙스 효과를 제공합니다.
<!-- 기본 패럴랙스 (위쪽으로 이동) -->
<site-parallax data-speed="0.5">
<div class="parallax-element">패럴랙스 콘텐츠</div>
</site-parallax>
<!-- 방향별 패럴랙스 -->
<site-parallax data-speed="1.2" data-direction="down">아래로</site-parallax>
<site-parallax data-speed="0.8" data-direction="left">왼쪽으로</site-parallax>
<site-parallax data-speed="1.5" data-direction="right">오른쪽으로</site-parallax>
<!-- direction: up, down, left, right -->
<!-- speed: 클수록 빠르게 이동 (권장: 0.5~2.0) -->위쪽의 파란색 바가 스크롤 진행률을 보여줍니다
3. Scroll Progress 컴포넌트
페이지 또는 특정 요소의 스크롤 진행률을 시각적으로 표시합니다.
💡 현재 페이지 상단의 파란색 바가 전체 스크롤 진행률을 보여주고 있습니다!
이 섹션 기준 진행률:
<!-- 전체 페이지 기준 진행률 (상단 고정) -->
<site-scroll-progress
data-position="top"
data-height="4px"
data-color="#007bff">
</site-scroll-progress>
<!-- 특정 요소 기준 진행률 -->
<site-scroll-progress
data-target="#target-section"
data-position="bottom"
data-height="6px"
data-color="#28a745">
</site-scroll-progress>
<!-- position: top, bottom -->
<!-- target: CSS 선택자 (없으면 전체 페이지 기준) -->아래의 스티키 요소를 확인해보세요
4. Sticky 컴포넌트
스크롤 시 특정 위치에서 고정되는 요소를 만들 수 있습니다.
이 영역을 스크롤하면서 아래의 스티키 요소가 상단에 고정되는 것을 확인해보세요.
📌 스티키 요소 - 스크롤해도 상단에 고정됩니다
추가 콘텐츠 영역
<!-- 기본 스티키 요소 -->
<site-sticky>
<div class="sticky-content">스티키 콘텐츠</div>
</site-sticky>
<!-- 고급 설정 -->
<site-sticky
data-top="80px"
data-z-index="1000">
<nav class="sticky-nav">내비게이션</nav>
</site-sticky>
<!-- CSS로 스티키 상태 스타일링 -->
<style>
.sticky-content.is-sticky {
background: rgba(255,255,255,0.95);
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
</style>새로운 스크롤 인터렉션을 체험해보세요
5. Scroll Color 컴포넌트
스크롤에 따라 요소의 색상이 부드럽게 변화합니다.
배경색 변화
빨강 → 청록
텍스트 색상 변화
빨강 → 보라
테두리 색상 변화
주황 → 초록
배경색 변화
파랑 → 보라
<!-- 배경색 변화 -->
<site-scroll-color
data-from="#ff6b6b"
data-to="#4ecdc4"
data-property="background-color">
<div class="color-changing-element">배경색이 변하는 요소</div>
</site-scroll-color>
<!-- 텍스트 색상 변화 -->
<site-scroll-color
data-from="#e74c3c"
data-to="#9b59b6"
data-property="color">
<h4>텍스트 색상이 변하는 요소</h4>
</site-scroll-color>
<!-- 테두리 색상 변화 -->
<site-scroll-color
data-from="#f39c12"
data-to="#27ae60"
data-property="border-color">
<div style="border: 4px solid;">테두리 색상이 변하는 요소</div>
</site-scroll-color>
<!-- property: background-color, color, border-color -->아래로 스크롤하면 텍스트가 타이핑됩니다
6. Scroll Typewriter 컴포넌트
스크롤에 따라 텍스트가 타이핑 효과로 나타납니다.
뷰포트 진입 시 자동 타이핑:
빠른 타이핑 (커서 없음):
<!-- 뷰포트 진입 시 자동 타이핑 -->
<site-scroll-typewriter
data-text="타이핑될 텍스트 내용"
data-speed="80"
data-trigger="viewport">
</site-scroll-typewriter>
<!-- 빠른 타이핑 (커서 없음) -->
<site-scroll-typewriter
data-text="빠르게 타이핑되는 텍스트"
data-speed="30"
data-cursor="false">
</site-scroll-typewriter>
<!-- trigger: viewport(뷰포트 진입), scroll(스크롤 진행률) -->
<!-- speed: 글자당 지연시간(ms) -->
<!-- cursor: 커서 표시 여부 (기본값: true) -->