[Library] vue-scroll-reveal

ScrollReveal은 요소를 뷰포트에 enter / leave 할 때 요소를 쉽게 애니메이트하기위한 JavaScript 라이브러리이다.

 

직접 DOM을 Select 해서 스크롤 높이와 content의 높이를 계산해서 구현하려다 좋은 라이브러리가 있어서 사용하게 되었다.

 

사용 예시: https://wizball.io/info

Wizball(ウィズボール)の紹介ページ

 

# 사용방법

1. vue-scroll-reveal 설치

yarn add vue-scroll-reveal

2. main.js에 vue-scroll-reveal 셋팅

import VueScrollReveal from 'vue-scroll-reveal';

Vue.use(VueScrollReveal);

3. 컴포넌트에 적용

mounted () {
    this.$sr.reveal('.section', {
      reset: true,
      mobile: true,
      beforeReveal: function (el) {
        el.classList.add('animate');
      },
      beforeReset: function (el) {
      el.classList.remove('animate');
        }
    });
}

 

# API

vue-scroll-reveal

https://www.npmjs.com/package/vue-scroll-reveal

vue-scroll-reveal

scroll-reveal

https://scrollrevealjs.org/api/reveal.html

Reveal — ScrollReveal

 

간단한 기능인데, 라이브러리를 사용해도 되나 싶었는데(애플리케이션이 무거워질 수 있으니깐..) 확실히 코드가 많이 간단해지기 때문에 사용하기로 했다.