[Vue.js] vue-typer 텍스트 타이핑 애니메이션

 

Vue.js

 

 

 

위 이미지와 같이 타이핑 애니메이션을 사용할 수 있는 NPM 모듈 vue-typer

설치

npm install --save vue-typer

 

적용 (main.js)

// ES6
import VueTyperPlugin from 'vue-typer'
// CommonJS
var VueTyperPlugin = require('vue-typer').default
// Global
var VueTyperPlugin = window.VueTyper.default



Vue.use(VueTyperPlugin)

 

 

사용

 <vue-typer class="display-3"
                   :text='["안녕하세요.","김정훈의 포트폴리오입니다!!!","방문 감사합니다!!!"]'
                   :repeat='Infinity'
                   initial-action='typing'
                   :pre-type-delay='100'
                   :type-delay='200'
                   :pre-erase-delay='1500'
                   :erase-delay='250'
                   erase-style='backspace'
                   :erase-on-complete='false'
                   caret-animation='blink'
        ></vue-typer>

 

프로퍼티는 cngu.github.io/vue-typer/ 참고

 

SCSS가 유난 부릴 때 참고

npm uninstall --save-dev sass-loader 

npm install --save-dev sass-loader@7.1.0 

 

npm은 정말 개발을 편리하게 도와준다... 굳..