Scroll-in text component for Vue
'vue-scrollin' is a Vue component that scrolls through various characters on mount before revealing the correct text.
Install the package from npm with your favorite package manager (eg. yarn add vue-scrollin or npm i vue-scrollin).
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>
Easily customise the animation with optional props.
| Property name | Type | Default | Description |
|---|---|---|---|
| characters | String/Array | a-z | Characters scrolled through |
| misses | Number | 4 | Number of scrolls before correct letter |
| speed | Number | 80 | Delay of each letter scoll (ms) |
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:
- Fork the project
- Create your feature branch (
git checkout -b new-feature-branch) - Commit your changes (
git commit -am 'add new feature') - Push to the branch (
git push origin new-feature-branch) - Submit a pull request!