Author: | salemjs |
---|---|
Views Total: | 106 views |
Official Page: | Go to website |
Last Update: | February 3, 2022 |
License: | MIT |
Preview:

Description:
An ultra-light (~1kb) web component for creating text typing & deleting animations.
Built with Custom Element. Requires no dependencies. All options can be passed via HTML data
attribute.
How to use it:
1. Import the slm-typewriter’s JavaScript and CSS.
<script src="slm-typewriter.min.js"></script> <link rel="stylesheet" href="slm-typewriter.min.css" />
2. Add the <slm-typewriter /> web component to the page and define the text to be printed character by character.
<slm-typewriter slm-items='["Text 1", "Text 2", "Text 3"]' />
3. Determine whether or not to loop the animation.
<slm-typewriter slm-loop="" slm-items='["Text 1", "Text 2", "Text 3"]' />
4. Config the delay in milliseconds.
<slm-typewriter slm-on-start="1500" slm-on-typing="120" slm-on-complete="2000" slm-on-finish="1500" slm-items='["Text 1", "Text 2", "Text 3"]' />
Changelog:
v1.1.2 (02/03/2022)
- update
How does one markup text within the “Text 1” etc. ? I.e. if i wanted one word to appear bold, or blue.
Thank you.