vue에서 scroll animation library sal.js 사용하기

워호

프로젝트 진행하면서 메인 페이지 예쁘게 보여주고 싶어서 `sal.js` 쓰려한다. 

 

https://mciastek.github.io/sal/

Sal - Lightweight scroll animation library

적용 엄청 쉬울 것 같았는데 적용되지 않는 내 메인 페이지를 보면서 끙끙댔다. 친절하게 vue에 sal.js 적용시키는 방법을 알려주신 블로거 분도 계셨는데... 그 방법대로 안되서 속상했다.

 

그러가다 다른 라이브러리들 vue에 적용시키는 방법들 찾아보고 시도해본 결과 성공!

기분 조우아. ㅎ_ㅎ

 

 

* install

$ npm install --save sal.js

 

* main.js

import sal from "sal.js"
import "##/sal.js/dist/sal.css"; // '##'은 node_modules 경로이다.

new Vue({
  created() {
    sal.init()
  },
  render: h => h(App)
}).$mount('#app')

 

* 컴포넌트에 적용

1. script

<script>
import sal from "sal.js";

export default {
 mounted() {
  sal();
 }
};
</script>

 

2. template - 다양한 애니메이션 효과는 요기에서 https://mciastek.github.io/sal/ 

<template>

  <div
    data-sal="slide-up"
    data-sal-delay="300"
    data-sal-easing="ease-out-back"
  ></div>
  
</template>

 

---

+ 11.5 )

햐... 콘솔에 에러 찍힌다. created 에 sal 박아 넣어둔게 문제라 해당 부분만 지우니 에러 메세지는 사라졌다. 와 라이프 사이클 공부해야지. 꺄 필요에 의해 하는 공부 너무 좋다.