ScrollReveal은 웹사이트에서 스크롤을 내릴 때 요소들이 부드럽게 나타나게 하는 라이브러리입니다. 이 라이브러리를 사용하여 요소들의 등장 시간을 조정하는 방법에 대해 알아보겠습니다.
먼저 ScrollReveal을 다운로드하여 프로젝트에 추가합니다. 다운로드 링크는 여기에서 찾을 수 있습니다.
다음으로, HTML 파일에서 나타나길 원하는 요소에 data-sr 속성을 추가합니다. 예를 들면 다음과 같습니다:
<div class="example-element" data-sr></div>
이제 javascript 파일에서 ScrollReveal을 초기화하고, 다양한 옵션을 설정할 수 있습니다. 등장 시간을 조정하기 위해 delay 옵션을 사용할 수 있습니다. 예를 들어, 모든 요소들이 0.5초 delay로 등장하도록 설정하려면 다음과 같이 작성합니다:
ScrollReveal().reveal('.example-element', { delay: 500 });
위 코드에서 .example-element는 class가 example-element인 요소들을 선택합니다. delay 옵션의 값은 밀리초 단위로 지정됩니다.
또한, 요소들이 순차적으로 등장하도록 하려면 interval 옵션을 사용할 수 있습니다. 예를 들어, 요소들이 0.5초 간격으로 등장하도록 설정하려면 다음과 같이 작성합니다:
ScrollReveal().reveal('.example-element', { interval: 500 });
위 코드에서 .example-element는 class가 example-element인 요소들을 선택합니다. interval 옵션의 값은 밀리초 단위로 지정됩니다.
ScrollReveal을 사용하여 웹사이트의 요소들이 멋지게 등장하도록 설정할 수 있습니다. delay와 interval 옵션을 조정하여 원하는 등장 효과를 만들어보세요.
참고 문서: