Overview
Keyboard Type Animation – AutoWritingText
Create modern and catchy text animation with this script. AutoWritingText simulates the writing of texts. Each letters appear each after another. A cursor is included to give authenticity. This lightweight javascript code can help you to bring your website to the next level ! Trigger the writing of a text with click, touch or scroll events or at anytime with a line of javascript.
Impossible using only css3
It would be virtually impossible to create complex text animations only with css transitions. With AutoWritingText you can do it with one line of javascript or html tags.
Flexibility
You can change font-size, font-color, font-family as you wish. AutoWritingText can be used on almost any html tag (div, p, h1-6, span, …).
Compatibility
AutoWritingText works in all the latest browsers, and partially in old ones (some features, in IE8, may be disabled).
Responsive
AutoWritingText doesn’t alter your other css files so your layout will stay responsive as before.
Javascript or Html
You can choose to use AutoWritingText both with javascript (with one line of code) and html (simply adding special attributes to html tags).
SEO friendly
You don’t have to alter your html structure. AutoWritingText can animate almost every tags containing text.
Features
Features
- realistic keyboard-writing-like text animation fully customizable
- the time between the writing of each letter can be partly random (+/- 20%)
- easy usage, 5 html attributes to set up the animation (i.e. speed, delay, begin-event, random, …)
- trigger the writing with touch, click or scroll events
- it can be triggered at anytime with one line of javascript
- responsive
- SEO friendly
- full compatibility with all the latest browsers
- fallback for older browsers
Requirements
Dependencies
AutoWritingText doesn’t require any dependencies to function.
Instructions
How to use ?
- insert :
<link rel="stylesheet" href="styles.css?v=1.0">in the<head>of your html - insert :
<script src="scripts.js">just before the end of your body in your html - in any html tag add the attribute :
data-autowritting='True' - add the attribute :
data-speed, give it the value very-fast, fast, normal, slow or very-slow, it’s the speed of writing. - add the attribute :
data-begin, give it the valueclick-touch,on-load,scrollorjs, it’s the event to trigger the animation - add the attribute :
data-delay, give it a number greater than 0, it’s the number of seconds to wait after the trigger event to start the animation - add the attribute :
data-random='True'if you want to add some random in the delay between the writing of two letters. - If you want to trigger the animation in javascript give an id to your html element and run this line
autowritting(document.getElementById('your-id'));
