Scroll-in text component for Vue

by Vue.js Examples

vue-scrollin

vue-scrollin is a Vue component that scrolls through various characters on mount before revealing the correct text.

View Demo Download Source

Install

Install the package from npm with your favorite package manager (eg. yarn add vue-scrollin or npm i vue-scrollin).

Usage

Simply import and register the component and use it in your template. For example,

<template>
  <VScrollin>
    this text will scroll
  </VScrollin>
</template>

<script>
import VScrollin from 'vue-scrollin'

export default {
  [...]
  components: {
    VScrollin
  }
};
</script>

Props

Easily customise the animation with optional props.

Property name Type Default Description
characters Array a-z Characters scrolled through
misses Number 4 Number of scrolls before correct letter
speed Number 80 Delay of each letter scoll (ms)

GitHub