먼저, ScrollReveal을 웹 페이지에 추가합니다. ScrollReveal은 CDN으로도 제공되므로 <script> 태그를 사용하여 아래와 같이 추가할 수 있습니다.

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

다음으로 요소를 가로, 세로 중앙으로 정렬하고자 하는 HTML 요소를 준비합니다. 가령, <div> 태그로 요소를 감싸고 centered라는 클래스를 추가해줍니다.

<div class="centered">
  <h1>Hello, ScrollReveal!</h1>
</div>

이제 JavaScript 코드를 작성하여 ScrollReveal을 초기화하고 요소를 가운데로 이동시킵니다. <script> 태그 안에 다음 코드를 추가합니다.

<script>
  // ScrollReveal 초기화
  ScrollReveal().reveal('.centered', {
    delay: 500,
    origin: 'center',
    distance: '100px',
    easing: 'ease-in-out',
    reset: true
  });
</script>

위 코드에서 ScrollReveal().reveal() 함수는 첫 번째 인자로 요소의 CSS 선택자를 받습니다. 여기서는 .centered 클래스를 선택자로 사용하여 요소를 지정했습니다. 두 번째 인자로는 요소의 나타남을 지연하는 delay 시간, origin의 중앙 좌표, 요소가 이동하는 distance, 등을 설정할 수 있습니다. 위 코드에서는 요소가 500ms 지연 후, 중앙에서 100px 아래로 이동하는 효과가 설정되었습니다.

이제 웹 페이지를 브라우저에서 열고 스크롤을 내리면 요소가 부드럽게 나타나면서 가운데로 이동하는 효과를 볼 수 있습니다. ScrollReveal을 이용하여 요소를 센터링하는 효과를 구현하는 방법을 알아보았습니다.

참고 문서:

• ScrollReveal 공식 문서
• ScrollReveal GitHub 저장소