typelighterjs
v1.0.3
Published
Take a stride into the world of dynamic and appealing typewriters. You can be sure that you will never think of looking back.
Downloads
22
Maintainers
Readme
TypeLighter.js - Just 1.04KB gzip - 12x lighter
The world's lightest yet most powerful JS TypeWriter out there. For more information, please, check typelighterjs.com.
Description :
TypeLighter.js is a free plugin to add typewriters in your web page. With this plugin, eight properties allow you to fine-tune the experience you want to share with your users. Most of them are predefined, but you can change their values using the data attribute.
Files :
There are three files in the compressed folder :
- README.md
- typelighter.js
- typelighter.min.js -> minified file
Installation :
Place the .js file in your folder and import it after the body tag
<script src ="your file path/typelighter.min.js"></script>
You can also use the CDN version :
<script src ="https://cdn.jsdelivr.net/npm/typelighterjs/typelighter.min.js"></script>
Add a new typewriter with a span tag.
<p><span class="typeWriter" data-text='["foo"]'></span></p>
Properties list :
| Property | Default value | Use | | --- | --- | --- | | data-text | Null | The array holding the strings to be written one after the other. | | data-speed | 1 | The writing speed is proportionnal to this integer. | | data-start | 500 (ms) | A delay before writing the next string. | | data-end | 2000 (ms) | A delay before deleting the current string. | | data-random | True | When enabled, the TypeWriter waits for a random time before writing or deleting the next character. | | data-max | Infinity | The maximum number of full iterations before the TypeWriter stops itself. | | data-dltSpeed | True | When enabled, a given string is deleted twice as fast as it is written. | | data-checkVisible | False | When enabled, the animation begins right when the element appears in the viewport. |
Example :
<p><span class="typeWriter" data-checkVisible="true" data-speed="2" data-text='["foo", "example"]'></span></p>
<p>Hello <span class="typeWriter" data-end="3000" data-text='["guys !", "world !"]'></span></p>
CSS :
The CSS is automatically injected in the DOM for convenience, though you could also paste it in your CSS file :
.cursor {
color:inherit;
position:relative;
font:inherit;
color:inherit;
line-height: inherit;
animation: Cursor 1s infinite;
}
@keyframes Cursor{
0%{opacity: 1;}
50%{opacity: 0;}
100%{opacity: 1;}
}
Enjoy :heart_eyes:
This project is licensed under the terms of the MIT license.