animate-text
To view the DEMO
Light text animation library, simple to use, file size 4K can add text appear animation, support string typing effect and digital change effect, support to monitor the end of the animation event project continuous update and maintenance
Installation method
- Methods a
npm install animate-text --saveCopy the code- Way 2
Download dist/animate-text.min.js from your project and insert it into your project with the script tag, which can be accessed through window.animateTextCopy the code<script type="text/javascript" src="dist/animate-text.min.js"></script>Copy the code
import AnimateText from 'animate-text'
//The easiest way to use it
new AnimateText('.text')
//If you need to define the animation time, you can initialize it this way
new AnimateText('.text'.1000)
//Write this if there are other Settings
new AnimateText('.text', {
time: 1000.//Animation duration
isNumber: true.//Whether to render as a digital animation
startNumber: 0.//The beginning number of an animation when rendered as a digital animation
changeCount: 32.//Digital animation number of changes
onAnimated: function () {console.log('End of the animation')} //Animation end event callback
})
Copy the code
Parameters that
AnimateText accepts two arguments, for example: new AnimateText(Element, options)
| parameter | type | If required | describe |
|---|---|---|---|
| element | String or Object | is | Can be a selector or a DOM node object (make sure this node contains only text and no other nodes) |
| options | Number or Object | no | If the second parameter is a number, it is treated as the animation time. If there are other parameters, they are passed in object format. See options below for a description of each attribute |
The second parameter options is specified
| parameter | type | The default value | If required | describe |
|---|---|---|---|---|
| time | Number | 500 | no | The duration of the animation |
| isNumber | Boolean | false | no | Whether to render as a digital animation |
| startNumber | Number | 0 | no | Digital animation of the beginning of the number |
| changeCount | Number | 32 | no | The number of changes in digital animation is the number of jumps before the final number |
| onAnimated | Function | null | no | End of animation listener function |
Instance object method description
//instantiation
var animateText = new AnimateText('.text')
//After the object is instantiated, the object provides the play method to replay the animation
//Accept parameters as animation time
//Without passing arguments, the instantiation time is used
animateText.play(1000)Copy the code