[javascript] ScrollReveal을 이용한 요소 슬라이드 토글 효과 구현 방법
ScrollReveal은 웹페이지에서 스크롤 이벤트에 반응하여 요소를 동적으로 보여주는 JavaScript 라이브러리입니다. 이를 활용하여 요소의 슬라이드 토글 효과를 구현해보겠습니다.
1. ScrollReveal 라이브러리 추가하기
먼저, ScrollReveal 라이브러리를 HTML 파일에 추가해야 합니다. 다음 CDN 링크를 <head> 태그 안에 추가해주세요.
<script src="https://unpkg.com/scrollreveal"></script>
2. 요소 설정하기
효과를 적용할 요소를 HTML 문서에서 찾아야 합니다. 예를 들어, 슬라이드 효과를 적용할 <div> 요소를 다음과 같이 설정해줍니다.
<div class="slide-toggle-element">...</div>
3. JavaScript 코드 작성하기
다음으로, ScrollReveal을 초기화하고 효과를 적용할 요소를 설정하는 JavaScript 코드를 작성해야 합니다. <script> 태그 안에 다음 코드를 작성해주세요.
// ScrollReveal 초기화
ScrollReveal({
duration: 1000, // 애니메이션 지속 시간 설정
delay: 200, // 애니메이션 지연 시간 설정
origin: 'bottom', // 애니메이션 시작 위치 설정 (예: top, bottom, left, right)
distance: '50px', // 애니메이션 이동 거리 설정
easing: 'ease-out', // 애니메이션 이징 설정 (예: linear, ease-in, ease-out, ease-in-out)
reset: true // 요소가 화면에 나타났을 때마다 애니메이션을 재시작할지 여부 설정
});
// 효과를 적용할 요소 선택
var slideToggleElements = document.querySelectorAll('.slide-toggle-element');
// 각 요소에 효과 적용
slideToggleElements.forEach(function(element) {
ScrollReveal().reveal(element);
});
위 코드에서 duration, delay, origin, distance, easing 등의 옵션은 필요에 따라 조정할 수 있습니다.
4. CSS 스타일 적용하기
슬라이드 효과를 보다 아름답게 만들기 위해 CSS 스타일을 적용해줍니다. .slide-toggle-element 클래스에 원하는 스타일을 추가해주세요.
.slide-toggle-element {
opacity: 0; // 처음에 요소를 숨김
transition: opacity 0.5s; // 투명도 변경 애니메이션 설정
}
.slide-toggle-element.reveal {
opacity: 1; // 요소가 나타날 때 투명도를 증가시킴
}
위 코드는 요소가 나타날 때 opacity 속성을 변경하여 애니메이션 효과를 주는 예시입니다.
결론
위 방법을 따라하면 ScrollReveal 라이브러리를 사용하여 요소의 슬라이드 토글 효과를 구현할 수 있습니다. 응용하여 다양한 스크롤 애니메이션 효과를 만들어보세요.