[javascript] ScrollReveal을 이용한 수평 스크롤 효과 구현 방법

01 Dec 2023

javascript

수평 스크롤 효과는 웹 페이지를 독특하게 만드는 방법 중 하나입니다. ScrollReveal은 이를 쉽고 간편하게 구현할 수 있도록 도와줍니다. ScrollReveal은 자바스크립트 라이브러리로, 스크롤 이벤트에 반응하여 요소들을 페이드 인 또는 슬라이드 인 등 다양한 효과와 함께 나타나게 할 수 있습니다.

ScrollReveal 설치

먼저 ScrollReveal을 설치해야 합니다. 이를 위해 npm을 사용하거나, CDN을 이용할 수 있습니다. 여기서는 CDN을 이용하는 방법을 알아보겠습니다.

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

위의 스크립트를 HTML 파일에 추가해줍니다.

ScrollReveal 사용법

ScrollReveal 초기화

<script>
    window.sr = ScrollReveal();
</script>

요소 설정

ScrollReveal을 사용할 요소들을 선택하고, 효과 및 옵션을 설정해줍니다.

<script>
    sr.reveal('.element', {
        origin: 'left',
        distance: '100px',
        duration: 1000,
        opacity: 0,
        easing: 'ease-in-out',
    });
</script>

위의 코드에서 ‘.element’는 ScrollReveal을 적용할 요소 선택자입니다. origin은 요소가 나타나는 방향을 지정하는데, 이 예제에서는 왼쪽에서 오른쪽으로 나타나도록 설정했습니다. distance는 요소의 이동 거리를 지정하는데, ‘100px’로 설정하여 100픽셀 만큼 이동하도록 했습니다. duration은 애니메이션의 지속 시간을 나타내는데, 이 예제에서는 1초로 설정했습니다. opacity는 요소의 투명도를 나타내는데, 0으로 설정하여 처음에는 요소가 보이지 않도록 했습니다. easing은 애니메이션의 완만함을 조절하는데, ‘ease-in-out’을 사용하여 부드러운 움직임을 만들어냈습니다.

ScrollReveal 적용

ScrollReveal을 적용할 요소들을 선택해줍니다.

<script>
    sr.reveal('.element');
</script>

위의 코드에서 ‘.element’는 ScrollReveal을 적용할 요소 선택자입니다.

예제

아래는 ScrollReveal을 이용하여 수평 스크롤 효과를 구현한 예제입니다.

<!DOCTYPE html>
<html>
<head>
    <title>ScrollReveal 수평 스크롤 효과</title>
    <style>
        body {
            width: 2000px;
        }
        .box {
            width: 400px;
            height: 400px;
            background-color: #f0f0f0;
            margin-right: 50px;
            display: inline-block;
        }
    </style>
    <script src="https://unpkg.com/scrollreveal@4/dist/scrollreveal.min.js"></script>
    <script>
        window.sr = ScrollReveal();
        sr.reveal('.box', {
            origin: 'left',
            distance: '100px',
            duration: 1000,
            opacity: 0,
            easing: 'ease-in-out',
        });
    </script>
</head>
<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>

위의 예제에서는 4개의 사각형 박스가 수평으로 나열되어 있습니다. 스크롤 이벤트가 발생하면 사각형 박스들이 왼쪽에서 오른쪽으로 순차적으로 나타나는 효과가 적용됩니다.