[javascript] ScrollReveal을 이용한 요소 사이즈 반전 효과 구현 방법

01 Dec 2023

javascript

ScrollReveal은 웹사이트에 스크롤 애니메이션 효과를 쉽게 추가할 수 있는 JavaScript 라이브러리입니다. 이번에는 ScrollReveal을 사용하여 요소의 사이즈를 반전하는 효과를 구현하는 방법에 대해 알아보겠습니다.

1. ScrollReveal 라이브러리 추가하기

먼저, ScrollReveal 라이브러리를 웹 페이지에 추가해야 합니다. 라이브러리를 다운로드하거나 CDN을 통해 가져올 수 있습니다. 아래는 CDN을 통해 ScrollReveal 라이브러리를 추가하는 예시입니다.

<script src="https://unpkg.com/scrollreveal"></script>

2. CSS 스타일 설정하기

요소의 사이즈를 반전시키기 위해 CSS 스타일을 설정해야 합니다. 아래는 요소의 초기 스타일과 반전된 스타일을 설정하는 예시입니다.

.flip-effect {
  width: 200px;
  height: 200px;
  background-color: blue;
  transition: transform 0.5s ease;
}

.flip-effect.flip {
  transform: scaleX(-1);
}

위의 코드에서 .flip-effect 클래스는 초기 사이즈와 배경색을 설정하고, .flip 클래스는 반전된 사이즈를 나타냅니다. 반전된 사이즈는 transform: scaleX(-1)을 이용하여 x축을 기준으로 반전시킬 수 있습니다.

3. ScrollReveal 객체 생성하기

ScrollReveal을 사용하기 위해 ScrollReveal 객체를 생성해야 합니다. 아래 코드를 <script> 태그 내에 추가하여 ScrollReveal 객체를 생성합니다.

const sr = ScrollReveal({
  origin: 'bottom',
  distance: '20px',
  duration: 1000,
  delay: 200,
  reset: true
});

위의 코드에서는 스크롤 애니메이션의 원래 위치(origin), 이동 거리(distance), 지속 시간(duration), 딜레이(delay) 등을 설정하고 있습니다.

4. 요소에 애니메이션 효과 적용하기

ScrollReveal 객체를 사용하여 요소에 애니메이션 효과를 적용할 수 있습니다. 아래 코드를 사용하여 요소에 애니메이션 효과를 추가합니다.

const element = document.querySelector('.flip-effect');
sr.reveal(element, {
  beforeReveal: (domEl) => {
    domEl.classList.add('flip');
  }
});

위의 코드에서 .flip-effect 클래스를 가진 요소에 .flip 클래스를 추가하여 사이즈를 반전시킬 수 있습니다. beforeReveal 콜백 함수는 애니메이션이 실행되기 전에 호출되며, 요소에 .flip 클래스를 추가하는 역할을 합니다.

마무리

위의 방법을 따라가면 ScrollReveal을 사용하여 요소의 사이즈를 반전하는 효과를 구현할 수 있습니다. ScrollReveal을 이용하면 다양한 스크롤 애니메이션 효과를 쉽게 추가할 수 있으니, 필요에 따라 다양한 애니메이션을 시도해보시기 바랍니다.

참고 자료

ScrollReveal 라이브러리 공식 문서