Create a JavaScript Kinetic Typing Animation
source link: https://www.tuicool.com/articles/qAzmmer
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
I write a post to inform you that I have added a typing effect to Scene.js
Effects library.
Typing animation refers to text that flows like typing in a typewriter.
In this article, I want to introduce the principles of typing animation.
Typing Animation
There are three typical ways to make typing animations.
- JavaScript Animation
- CSS Animation (PC Chrome Only)
- SVG Animation
The animation to be described in this article is JavaScript.
Because it’s simpler than I thought.
CSS animation can also create typing animations using the before
or after
pseudo selector and content
property. However, since it is a selector that only supports PC Chrome, it is too much to use.
If your browser is PC Chrome, you will see the animation below.
Typing animation is a method of importing text sequentially into html as shown below.
you create a typing animation using Scene.js
, you can write the code as follows:
Play the above code and it will look like the following CodePen:
Kinetic Animation
In addition to typing animation, it tries to have a kinetic effect.
The kinetic effect moves the origin point in the opposite direction.
The origin point appears to be fixed but is moving.
Once you create a kinetic animation using Scene.js, you can write the code as follows:
Play the above code and it will look like the following CodePen:
Kinetic Typing Animation
Finally, add typing animation in time for kinetic effect.
Finally, if you tie the typing effect to the kinetic effect, it will be as follows:
Note:
To see more animation using Scene.js
:
Check out my projects at the following link:
https://github.com/daybrush/scenejs
https://github.com/daybrush/scenejs-effectsIf you like it, press the star.
Feel free to contact me if you have any questions or requests by [email protected] or Twitter . See you soon!
Thank you
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK