[javascript] ScrollReveal을 활용한 반응형 웹 디자인 구현 방법

01 Dec 2023

javascript

반응형 웹 디자인은 모바일 환경에서도 웹사이트를 적절한 크기와 레이아웃으로 표시하는 것을 의미합니다. ScrollReveal은 반응형 웹사이트를 만들 때 사용할 수 있는 자바스크립트 라이브러리입니다. 이 라이브러리는 페이지 스크롤시 요소가 부드럽게 나타나거나 페이드 인/아웃 효과를 제공하여 웹사이트에 동적인 요소를 추가할 수 있습니다.

ScrollReveal 설치

먼저 ScrollReveal을 설치해야 합니다. NPM을 사용하는 경우, 다음 명령어를 사용합니다:

npm install scrollreveal

CDN을 사용하는 경우, 다음과 같이 script 태그를 HTML 파일에 추가합니다:

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

ScrollReveal 사용하기

ScrollReveal을 사용하기 위해 먼저 스크립트를 페이지에 로드해야 합니다. 로드 후에는 다음과 같이 ScrollReveal 객체를 생성하고 사용할 수 있습니다.

const sr = ScrollReveal();

sr.reveal('.my-element', {
  origin: 'bottom',
  distance: '20px',
  duration: 1000,
  delay: 0,
  easing: 'ease',
  rotate: { x: 0, y: 0, z: 0 },
  opacity: 0,
  scale: 1,
  cleanup: true,
  container: window.document.documentElement,
  desktop: true,
  mobile: true,
  reset: false,
  useDelay: 'always',
  viewFactor: 0.2,
  viewOffset: { top: 0, right: 0, bottom: 0, left: 0 },
});

위의 예제에서는 ScrollReveal 객체를 sr 변수에 할당하고, .my-element 클래스를 갖는 요소를 선택하고, 페이지 스크롤 시 요소가 하단에서 상단으로 나타나는 효과를 적용하도록 설정하고 있습니다.

위 예제에서 일부 속성을 설명하면 다음과 같습니다:

origin: 요소가 어느 방향에서 나타날 지 지정합니다. 여기에서는 하단(bottom)에서 나타나도록 설정되어 있습니다.
distance: 요소가 나타날 때 이동하는 거리를 지정합니다.
duration: 요소가 나타나는 데 걸리는 시간을 지정합니다.
delay: 요소가 나타나기 전에 대기하는 시간을 지정합니다.
easing: 요소가 나타날 때의 가속도를 지정합니다.
opacity: 요소의 투명도를 지정합니다.

이 외에도 아래의 참고 문서를 통해 모든 속성을 자세히 알아볼 수 있습니다.

ScrollReveal 설치

ScrollReveal 사용하기

참고 자료