Created by Batuhan Özen
- Download the repo and go to examples.html
- Download and require the css and js files
<!-- TYPE EFFECT JS -->
<link rel="stylesheet" href="path/to/TypeEffect.css">
<script src="path/to//TypeEffect.js"></script>
<!-- END OF TYPE EFFECT JS -->- create an element for type effect with typeEffect class and a id than set the element text
<p id="a" class="typeEffect">Text 1</p>- Note: Element's width must to be equal text's one else library will not work like expected! If you want you can use it in typeEffect's container like this:
<div class="typeEffectContainer">
<p id="a" class="typeEffect">Text 1</p>
</div>- next step is initializing with js.
<script>
initTypeEffect({id:'a'});
</script>- You don't have to describe an id for initializing but suggested method is using with id
<script>
initTypeEffect();
</script> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/TypeEffect.css">
<script src="js/TypeEffect.js"></script>
</head>
<body>
<div class="typeEffectContainer">
<h2>This is not typing</h2>
<p id="a" class="typeEffect">This is typing</p>
<script>
initTypeEffect({
id : 'a',
timeOut : 0.5,
forwards : false,
color : 'violet',
blinkerColor : 'red'
});
</script>
</div>
</body>
</html>| Parameter | Description | Default Value |
| id | Element id. if it is null all elements with typeEffectclass will get compiled | NULL |
| timeOut | Typing time. it is timeout value for each letter. i.g. if its 0.1 first letter will get typed in 0.1 seconds and second will 0.2 and third... | 0.2 |
| forwards | If this is true. type effect work only once. | false |
| color | This is a basic css color. you can set it as hex, rgb/rgba, hsl, color name etc. Sets the color of the text | 'black' |
| blinkerColor | Same with color but sets the color of the blinker | '#000000' Value |
| text | This is a string variable. if you set it it'll type it if you don't it'll try to get text from item's inner text. | '#000000' Value |