[javascript] ScrollReveal을 이용한 요소 스킬셋 변화 효과 구현 방법

01 Dec 2023

javascript

요소들이 스크롤 되면서 동적인 효과를 주는 것은 매력적입니다. ScrollReveal은 웹 페이지에서 요소들이 스크롤 될 때 애니메이션 및 변화 효과를 쉽게 구현할 수 있게 도와줍니다. 이번 포스트에서는 ScrollReveal을 이용하여 요소의 스킬셋 변화 효과를 구현하는 방법을 알아보겠습니다.

1. ScrollReveal 설치하기

먼저 ScrollReveal 라이브러리를 설치해야 합니다. 아래 커맨드를 사용하여 npm으로 설치할 수 있습니다.

npm install scrollreveal

2. ScrollReveal 초기화하기

ScrollReveal을 사용하기 위해 초기화 과정이 필요합니다. 초기화를 하기 위해 HTML 문서의 <head> 태그 안에 아래의 스크립트를 추가하세요.

<script src="https://unpkg.com/scrollreveal@4.0.7/dist/scrollreveal.min.js"></script>

3. 요소에 스킬셋 적용하기

이제 ScrollReveal을 사용하여 요소에 스킬셋 변화 효과를 적용해보겠습니다. 예를 들어, <div> 요소에 서서히 나타나는 애니메이션 효과를 주려면 다음과 같이 코드를 작성하세요.

const sr = ScrollReveal();

sr.reveal('.skillset', {
  origin: 'bottom',
  duration: 1000,
  distance: '20px',
  delay: 200,
});

위의 코드에서 .skillset은 스킬셋을 적용하려는 요소의 클래스 이름입니다. origin은 애니메이션 효과가 나타날 기준점을 설정하고, duration은 애니메이션의 지속시간을 설정합니다. distance는 요소가 이동할 거리를 설정하고, delay는 애니메이션 시작까지의 지연 시간을 설정합니다.

결론

ScrollReveal을 이용하여 요소의 스킬셋 변화 효과를 구현하는 방법을 알아보았습니다. ScrollReveal은 다양한 애니메이션 옵션을 제공하여 웹 페이지에 동적인 효과를 추가하는 데 편리한 도구입니다. 따라서 ScrollReveal을 사용하여 웹 페이지를 보다 흥미롭게 만들어보세요.

참고 자료

ScrollReveal 공식 문서: https://scrollrevealjs.org/
npm ScrollReveal 패키지: https://www.npmjs.com/package/scrollreveal