Scroll-in text component for Vue

Scroll-in text component for Vue

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

vue-scrollin

Scroll-in text component for Vue

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

Try it on CodeSandbox

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)

Contributing

This project is open to and encourages contributions! Feel free to discuss any bug fixes/features in the issues. If you wish to work on this project:

  1. Fork the project
  2. Create your feature branch (git checkout -b new-feature-branch)
  3. Commit your changes (git commit -am 'add new feature')
  4. Push to the branch (git push origin new-feature-branch)
  5. Submit a pull request!

Github Repository

Tags: #VueJs #Text