├── images ├── foo.gif ├── fooexample.gif ├── guysworld.gif └── typelighter.gif ├── examples ├── example 1 │ ├── favicon.ico │ ├── images │ │ ├── close.png │ │ ├── github.png │ │ ├── twitter.png │ │ ├── facebook.png │ │ ├── logoTypeLighter.js.png │ │ ├── typelighter-network.png │ │ └── logoTypeLighter.js.white.png │ ├── font │ │ ├── SourceCodePro-Regular.otf │ │ ├── SourceCodePro-Regular.ttf │ │ ├── SourceCodePro-Regular.woff │ │ └── SourceCodePro-Regular.woff2 │ ├── js │ │ └── typelighter.min.js │ ├── css │ │ └── style.min.css │ └── index.html └── example 2 │ ├── images │ ├── bg.jpg │ ├── logo.PNG │ ├── main.JPG │ └── paw.PNG │ ├── index.html │ ├── js │ └── typelighter.min.js │ └── css │ └── style.css ├── LICENSE ├── typelighter.min.js ├── README.md └── typelighter.js /images/foo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EdernClemente/TypeLighterJS-Typewriter/HEAD/images/foo.gif -------------------------------------------------------------------------------- /images/fooexample.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EdernClemente/TypeLighterJS-Typewriter/HEAD/images/fooexample.gif -------------------------------------------------------------------------------- /images/guysworld.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EdernClemente/TypeLighterJS-Typewriter/HEAD/images/guysworld.gif -------------------------------------------------------------------------------- /images/typelighter.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EdernClemente/TypeLighterJS-Typewriter/HEAD/images/typelighter.gif -------------------------------------------------------------------------------- /examples/example 1/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EdernClemente/TypeLighterJS-Typewriter/HEAD/examples/example 1/favicon.ico -------------------------------------------------------------------------------- /examples/example 2/images/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EdernClemente/TypeLighterJS-Typewriter/HEAD/examples/example 2/images/bg.jpg -------------------------------------------------------------------------------- /examples/example 2/images/logo.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EdernClemente/TypeLighterJS-Typewriter/HEAD/examples/example 2/images/logo.PNG -------------------------------------------------------------------------------- /examples/example 2/images/main.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EdernClemente/TypeLighterJS-Typewriter/HEAD/examples/example 2/images/main.JPG -------------------------------------------------------------------------------- /examples/example 2/images/paw.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EdernClemente/TypeLighterJS-Typewriter/HEAD/examples/example 2/images/paw.PNG -------------------------------------------------------------------------------- /examples/example 1/images/close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EdernClemente/TypeLighterJS-Typewriter/HEAD/examples/example 1/images/close.png -------------------------------------------------------------------------------- /examples/example 1/images/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EdernClemente/TypeLighterJS-Typewriter/HEAD/examples/example 1/images/github.png -------------------------------------------------------------------------------- /examples/example 1/images/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EdernClemente/TypeLighterJS-Typewriter/HEAD/examples/example 1/images/twitter.png -------------------------------------------------------------------------------- /examples/example 1/images/facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EdernClemente/TypeLighterJS-Typewriter/HEAD/examples/example 1/images/facebook.png -------------------------------------------------------------------------------- /examples/example 1/font/SourceCodePro-Regular.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EdernClemente/TypeLighterJS-Typewriter/HEAD/examples/example 1/font/SourceCodePro-Regular.otf -------------------------------------------------------------------------------- /examples/example 1/font/SourceCodePro-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EdernClemente/TypeLighterJS-Typewriter/HEAD/examples/example 1/font/SourceCodePro-Regular.ttf -------------------------------------------------------------------------------- /examples/example 1/images/logoTypeLighter.js.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EdernClemente/TypeLighterJS-Typewriter/HEAD/examples/example 1/images/logoTypeLighter.js.png -------------------------------------------------------------------------------- /examples/example 1/images/typelighter-network.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EdernClemente/TypeLighterJS-Typewriter/HEAD/examples/example 1/images/typelighter-network.png -------------------------------------------------------------------------------- /examples/example 1/font/SourceCodePro-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EdernClemente/TypeLighterJS-Typewriter/HEAD/examples/example 1/font/SourceCodePro-Regular.woff -------------------------------------------------------------------------------- /examples/example 1/font/SourceCodePro-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EdernClemente/TypeLighterJS-Typewriter/HEAD/examples/example 1/font/SourceCodePro-Regular.woff2 -------------------------------------------------------------------------------- /examples/example 1/images/logoTypeLighter.js.white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EdernClemente/TypeLighterJS-Typewriter/HEAD/examples/example 1/images/logoTypeLighter.js.white.png -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 edernclemente 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /examples/example 2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | TypeLighter.js 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 | logo 17 |
18 | 24 |
25 |
26 | 27 |
28 |

29 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

30 | dream image 31 |
32 | 33 |
34 |
35 |

36 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

37 | GET DEMO 38 |

39 |
40 |
41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /typelighter.min.js: -------------------------------------------------------------------------------- 1 | function e(a,b){this.i=b;this.speed=parseInt(a.getAttribute("data-speed"),10)||1;this.h=parseInt(a.getAttribute("data-start"),10)||500;this.endDelay=parseInt(a.getAttribute("data-end"),10)||2E3;this.l="false"!==a.getAttribute("data-random");this.g=parseFloat(a.getAttribute("data-max"))||!1;this.j="false"!==a.getAttribute("data-dltSpeed");this.f=a;this.b=0;this.text="";this.c=!1;this.a=function(){};var c=document.createElement("span");c.className="cursor";c.innerHTML="|";this.f.parentNode.appendChild(c); 2 | "true"==a.getAttribute("data-checkVisible")?f(this):this.loop()} 3 | e.prototype.loop=function(){var a=this;if(!(this.g&&this.b>this.g)){if(0!==this.b){var b=this.i[Math.floor(this.b-.5)%this.i.length];this.text=b.substring(0,this.text.length+(this.c?-1:1));this.f.innerHTML=''+this.text+"";""===this.text&&this.c?(this.c=!1,this.b+=.5,b=this.h):this.text!==b||this.c?b=this.c&&this.j?50/this.speed:this.l?(200-10*Math.random())/this.speed:100/this.speed:(b=this.endDelay,this.c=!0,this.b+=.5)}else b=this.h,this.b+=.5;setTimeout(function(){return a.loop()}, 4 | b)}}; 5 | function f(a){a.a=g(a.f,function(){window.removeEventListener?(removeEventListener("DOMContentLoaded",a.a,!1),removeEventListener("load",a.a,!1),removeEventListener("scroll",a.a,!1),removeEventListener("resize",a.a,!1)):window.detachEvent&&(detachEvent("onDOMContentLoaded",a.a),detachEvent("onload",a.a),detachEvent("onscroll",a.a),detachEvent("onresize",a.a));a.loop()});window.addEventListener?(addEventListener("DOMContentLoaded",a.a,!1),addEventListener("load",a.a,!1),addEventListener("scroll",a.a, 6 | !1),addEventListener("resize",a.a,!1)):window.attachEvent&&(attachEvent("onDOMContentLoaded",a.a),attachEvent("onload",a.a),attachEvent("onscroll",a.a),attachEvent("onresize",a.a));a.a()}function g(a,b){var c=!1;return function(){var d=a.getBoundingClientRect();d=0<=d.top&&0<=d.left&&d.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&d.right<=(window.innerWidth||document.documentElement.clientWidth);d!=c&&(c=d,"function"==typeof b&&b())}} 7 | window.onload=function(){for(var a=document.getElementsByClassName("typeWriter"),b=0;bthis.g)){if(0!==this.b){var b=this.i[Math.floor(this.b-.5)%this.i.length];this.text=b.substring(0,this.text.length+(this.c?-1:1));this.f.innerHTML=''+this.text+"";""===this.text&&this.c?(this.c=!1,this.b+=.5,b=this.h):this.text!==b||this.c?b=this.c&&this.j?50/this.speed:this.l?(200-10*Math.random())/this.speed:100/this.speed:(b=this.endDelay,this.c=!0,this.b+=.5)}else b=this.h,this.b+=.5;setTimeout(function(){return a.loop()}, 4 | b)}}; 5 | function f(a){a.a=g(a.f,function(){window.removeEventListener?(removeEventListener("DOMContentLoaded",a.a,!1),removeEventListener("load",a.a,!1),removeEventListener("scroll",a.a,!1),removeEventListener("resize",a.a,!1)):window.detachEvent&&(detachEvent("onDOMContentLoaded",a.a),detachEvent("onload",a.a),detachEvent("onscroll",a.a),detachEvent("onresize",a.a));a.loop()});window.addEventListener?(addEventListener("DOMContentLoaded",a.a,!1),addEventListener("load",a.a,!1),addEventListener("scroll",a.a, 6 | !1),addEventListener("resize",a.a,!1)):window.attachEvent&&(attachEvent("onDOMContentLoaded",a.a),attachEvent("onload",a.a),attachEvent("onscroll",a.a),attachEvent("onresize",a.a));a.a()}function g(a,b){var c=!1;return function(){var d=a.getBoundingClientRect();d=0<=d.top&&0<=d.left&&d.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&d.right<=(window.innerWidth||document.documentElement.clientWidth);d!=c&&(c=d,"function"==typeof b&&b())}} 7 | window.onload=function(){for(var a=document.getElementsByClassName("typeWriter"),b=0;bthis.g)){if(0!==this.b){var b=this.i[Math.floor(this.b-.5)%this.i.length];this.text=b.substring(0,this.text.length+(this.c?-1:1));this.f.innerHTML=''+this.text+"";""===this.text&&this.c?(this.c=!1,this.b+=.5,b=this.h):this.text!==b||this.c?b=this.c&&this.j?50/this.speed:this.l?(200-10*Math.random())/this.speed:100/this.speed:(b=this.endDelay,this.c=!0,this.b+=.5)}else b=this.h,this.b+=.5;setTimeout(function(){return a.loop()}, 4 | b)}}; 5 | function f(a){a.a=g(a.f,function(){window.removeEventListener?(removeEventListener("DOMContentLoaded",a.a,!1),removeEventListener("load",a.a,!1),removeEventListener("scroll",a.a,!1),removeEventListener("resize",a.a,!1)):window.detachEvent&&(detachEvent("onDOMContentLoaded",a.a),detachEvent("onload",a.a),detachEvent("onscroll",a.a),detachEvent("onresize",a.a));a.loop()});window.addEventListener?(addEventListener("DOMContentLoaded",a.a,!1),addEventListener("load",a.a,!1),addEventListener("scroll",a.a, 6 | !1),addEventListener("resize",a.a,!1)):window.attachEvent&&(attachEvent("onDOMContentLoaded",a.a),attachEvent("onload",a.a),attachEvent("onscroll",a.a),attachEvent("onresize",a.a));a.a()}function g(a,b){var c=!1;return function(){var d=a.getBoundingClientRect();d=0<=d.top&&0<=d.left&&d.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&d.right<=(window.innerWidth||document.documentElement.clientWidth);d!=c&&(c=d,"function"==typeof b&&b())}} 7 | window.onload=function(){for(var a=document.getElementsByClassName("typeWriter"),b=0;b 3 | 4 | 5 | **The world's lightest yet most powerful JS TypeWriter out there. (Without JQUERY)**
6 | >[Download ZIP](https://github.com/EdernClemente/TypeLighterJS/archive/master.zip) 7 | 8 | # Description : 9 | 10 | **TypeLighter.js** is a free plugin to add **typewriters** in your web page. 11 | With this plugin, **eight properties** allow you to fine-tune the experience you want to share with your users. 12 | Most of them are predefined, but you can change their values using the **data attribute**. 13 | 14 | # Files : 15 | **There are three files** in the compressed folder : 16 | 17 | - README.md 18 | - typelighter.js
19 | - typelighter.min.js -> minified file 20 | 21 | # Installation : 22 | 23 | Place the .js file in your folder and import it after the body tag : 24 | ```html 25 | 26 | ``` 27 | 28 | You can also use the CDN version : 29 | ```html 30 | 31 | ``` 32 | 33 | Add a new typewriter with a span tag : 34 | 35 | ```html 36 |

37 | ``` 38 | 39 | 40 | # Properties list : 41 | | Property | Default value | Use | 42 | | --- | --- | --- | 43 | | data-text | Null | The array holding the strings to be written one after the other. | 44 | | data-speed | 1 | The writing speed is proportionnal to this integer. | 45 | | data-start | 500 (ms) | A delay before writing the next string. | 46 | | data-end | 2000 (ms) | A delay before deleting the current string. | 47 | | data-random | True | When enabled, the TypeWriter waits for a random time before writing or deleting the next character. | 48 | | data-max | Infinity | The maximum number of full iterations before the TypeWriter stops itself. | 49 | | data-dltSpeed | True | When enabled, a given string is deleted twice as fast as it is written. | 50 | | data-checkVisible | False | When enabled, the animation begins right when the element appears in the viewport. | 51 | 52 | # Example : 53 | 54 | ```html 55 |

56 | ``` 57 | 58 | 59 | ```html 60 |

Hello

61 | ``` 62 | 63 | 64 | # CSS : 65 | The CSS is **automatically injected** in the DOM for convenience, though you could also paste it in your CSS file : 66 | ```css 67 | .cursor { 68 | color:inherit; 69 | position:relative; 70 | font:inherit; 71 | color:inherit; 72 | line-height: inherit; 73 | animation: Cursor 1s infinite; 74 | } 75 | 76 | @keyframes Cursor{ 77 | 0%{opacity: 1;} 78 | 50%{opacity: 0;} 79 | 100%{opacity: 1;} 80 | } 81 | ``` 82 | Enjoy :heart_eyes: 83 | 84 | *This project is licensed under the terms of the MIT license.* 85 | -------------------------------------------------------------------------------- /typelighter.js: -------------------------------------------------------------------------------- 1 | //INJECTING CSS, you can also paste it in your CSS file. 2 | function addCssCursor() { 3 | "use strict"; 4 | var css = document.createElement("style"); 5 | css.type = "text/css"; 6 | css.innerHTML = ".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;}};" 7 | document.body.appendChild(css); 8 | } 9 | 10 | class Typewriter { 11 | constructor(el, userText) { 12 | this.userText = userText; 13 | this.speed = parseInt(el.getAttribute("data-speed"), 10) || 1; 14 | this.startDelay = parseInt(el.getAttribute("data-start"), 10) || 500; 15 | this.endDelay = parseInt(el.getAttribute("data-end"), 10) || 2000; 16 | this.isRandomlyTimed = el.getAttribute("data-random") !== "false"; 17 | this.loopThreshold = parseFloat(el.getAttribute("data-max")) || false; 18 | this.deleteSpeed = el.getAttribute("data-dltSpeed") !== "false"; 19 | this.el = el; 20 | this.isRunning = false; 21 | this.loopNumber = 0; 22 | this.text = ""; 23 | this.isDeleting = false; 24 | this.handler = function() {}; 25 | 26 | var cursor = document.createElement("span"); 27 | cursor.className = "cursor"; 28 | cursor.innerHTML = "|"; 29 | this.el.parentNode.appendChild(cursor); 30 | 31 | if (el.getAttribute("data-checkVisible") == "true") { 32 | this.checkVisible(); 33 | } else { 34 | this.loop(); 35 | } 36 | } 37 | 38 | loop() { 39 | if (this.loopThreshold && (this.loopNumber) > (this.loopThreshold)) { return; } 40 | 41 | //The first execution is delayed 42 | if (this.loopNumber !== 0) { 43 | //Grabbing the appropriate string 44 | var fullText = this.userText[Math.floor(this.loopNumber - 0.5) % this.userText.length]; 45 | 46 | this.text = fullText.substring(0, this.text.length + (this.isDeleting ? -1 : 1)); 47 | 48 | this.el.innerHTML = '' + this.text + ''; 49 | 50 | var delta; 51 | 52 | if (this.text === "" && this.isDeleting) { 53 | this.isDeleting = false; 54 | this.loopNumber += 0.5; 55 | delta = this.startDelay; 56 | } else if (this.text === fullText && !this.isDeleting) { 57 | delta = this.endDelay; 58 | this.isDeleting = true; 59 | this.loopNumber += 0.5; 60 | } else { 61 | if (this.isDeleting && this.deleteSpeed) { 62 | delta = 50 / this.speed; 63 | } else { 64 | delta = (this.isRandomlyTimed ? (200 - Math.random() * 10) / this.speed : 100 / this.speed); 65 | } 66 | } 67 | } else { 68 | var delta = this.startDelay; 69 | this.loopNumber += 0.5; 70 | } 71 | 72 | setTimeout(() => this.loop(), delta); 73 | } 74 | 75 | //Check the visibility of an element when "checkVisible" is enabled 76 | checkVisible() { 77 | 78 | var that = this; 79 | 80 | this.handler = onVisibilityChange(this.el, function() { 81 | 82 | if (window.removeEventListener) { 83 | removeEventListener('DOMContentLoaded', that.handler, false); 84 | removeEventListener('load', that.handler, false); 85 | removeEventListener('scroll', that.handler, false); 86 | removeEventListener('resize', that.handler, false); 87 | } else if (window.detachEvent) { 88 | detachEvent('onDOMContentLoaded', that.handler); // IE9+ :( 89 | detachEvent('onload', that.handler); 90 | detachEvent('onscroll', that.handler); 91 | detachEvent('onresize', that.handler); 92 | } 93 | 94 | that.loop(); 95 | }); 96 | 97 | if (window.addEventListener) { 98 | addEventListener('DOMContentLoaded', this.handler, false); 99 | addEventListener('load', this.handler, false); 100 | addEventListener('scroll', this.handler, false); 101 | addEventListener('resize', this.handler, false); 102 | } else if (window.attachEvent) { 103 | attachEvent('onDOMContentLoaded', this.handler); // IE9+ :( 104 | attachEvent('onload', this.handler); 105 | attachEvent('onscroll', this.handler); 106 | attachEvent('onresize', this.handler); 107 | } 108 | this.handler(); 109 | } 110 | } 111 | 112 | function isElementInViewport (el) { 113 | 114 | var rect = el.getBoundingClientRect(); 115 | 116 | return ( 117 | rect.top >= 0 && 118 | rect.left >= 0 && 119 | rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && 120 | rect.right <= (window.innerWidth || document.documentElement.clientWidth) 121 | ); 122 | } 123 | 124 | function onVisibilityChange(el, callback) { 125 | var old_visible = false; 126 | return function () { 127 | var visible = isElementInViewport(el); 128 | if (visible != old_visible) { 129 | old_visible = visible; 130 | if (typeof callback == 'function') { 131 | callback(); 132 | } 133 | } 134 | } 135 | } 136 | 137 | window.onload = function () { 138 | var elements = document.getElementsByClassName("typeWriter"); 139 | for (var i=0; i< elements.length; i++) { 140 | var userText = elements[i].getAttribute("data-text"); 141 | if (userText) { 142 | //Creating an object and parsing the string into an array 143 | new Typewriter(elements[i], JSON.parse(userText)); 144 | } 145 | } 146 | addCssCursor(); 147 | } 148 | 149 | -------------------------------------------------------------------------------- /examples/example 1/css/style.min.css: -------------------------------------------------------------------------------- 1 | @font-face{font-family:sourceCodePro;src:url(../font/SourceCodePro-Regular.woff2) format("woff2"),url(../font/SourceCodePro-Regular.woff) format("woff"),url(../font/SourceCodePro-Regular.ttf) format("truetype"),url(../font/SourceCodePro-Regular.otf) format("opentype");font-weight:400;font-style:normal}body{margin:0;background-color:#fff;font-family:sourceCodePro,Monaco,"Lucida Console",monospace}.container{margin:auto;width:960px}.cursor{color:inherit;position:relative;font:inherit;color:inherit;bottom:+.13em;animation:Cursor 1s infinite}@keyframes Cursor{0%{opacity:1}50%{opacity:0}100%{opacity:1}}header{background-color:#ffd039;padding:5px 0 5px 0}.navbar{display:flex;justify-content:space-between;align-items:center;margin:auto;width:960px}.navbar-brand{display:flex;align-items:center}.navbar-brand p{font-size:1.3em;margin-left:20px}.navbar-brand img{width:48px;height:48px;margin:5px 5px 5px 0}.navbar-nav ul{display:flex;list-style:none}.navbar-nav ul li{padding:8px 0 8px 30px}.navbar-nav ul li a{font-size:1.05em;color:inherit;text-decoration:none}.btn-fill{font-family:helvetica;color:#fff!important;padding:.6em 1.5em .6em 1.5em;border-radius:.4em;box-shadow:0 2px 5px 0 rgba(0,0,0,.26);text-decoration:none;transition-property:box-shadow;transition-duration:.3s}.btn-fill:hover{box-shadow:.5px 3px 8px #2f2e2e}.btn-black{background-color:#222121}.btn-red{background-color:#e62222}.bg-yellow{background-color:#ffd039;height:410px;display:flex;justify-content:center;flex-direction:column}.bg-yellow h1{font-size:2.9em;margin-bottom:0;margin-top:0}.bg-yellow p{font-size:2.2em;max-width:850px;margin-bottom:0}.sign{font-size:1.3em!important}.btn-big{font-size:1.5em;text-decoration:none}.relative{position:relative;top:-30px}.flex-center{display:flex;flex-direction:column;align-items:center}.flex-center p{font-size:1.7em;margin-top:20px;text-align:center;margin-bottom:1em!important}.number-part{padding-top:130px;padding-bottom:130px}.column-wrap{display:flex;justify-content:center;flex-wrap:wrap}.column-wrap .column{display:inline-block}.bg-gray .column-wrap .column{padding-top:30px;padding-bottom:30px}.w-25{width:25%}.w-33{width:33%}.w-35{width:35%}.w-50{width:50%}.w-65{width:65%}.w-75{width:75%}.number-part h3{font-size:2em;text-align:center}.number-part div .column .key-number{font-family:"Segoe UI",Roboto,Arial;text-align:center;color:#b8a214;font-size:6em;margin:0}.number-part div .column p{text-align:center;font-size:1.8em}.modal-bg{z-index:3;display:none;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,.4);cursor:pointer}.modal-content{position:fixed;top:50%;left:50%;margin-top:-150px;margin-left:-320px;animation:animatezoom .6s;box-shadow:0 4px 10px 0 rgba(0,0,0,.2),0 4px 20px 0 rgba(0,0,0,.19);background-color:#fff;position:fixed;padding:0;width:600px;height:260px;padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:1em;cursor:default}.modal-content h4{font-size:1.9em;text-align:center;margin-bottom:0}.modal-content p{font-size:1.2em;text-align:center}.modal-content a{font-size:1.2em;margin:1em}.modal-content img{position:absolute;top:10px;right:10px;width:30px;height:30px;cursor:pointer}@keyframes animatezoom{0%{transform:scale(0)}100%{transform:scale(1)}}@media screen and (max-width:680px){.modal-content{width:370px;margin-left:-205px;height:320px;margin-top:-180px}}@media screen and (max-width:440px){.modal-bg{padding:20px;box-sizing:border-box}.modal-content{position:relative;width:100%;height:100%;margin:0;top:unset;left:unset;box-sizing:border-box}}.bg-gray{background-color:#f0f0f0;padding-top:50px;padding-bottom:10px}.bg-gray p{font-family:"Segoe UI",Roboto,Helvetica}.console{background-color:#1b1b1b;display:inline-block;width:95%;height:unset;border-radius:20px;box-shadow:.5px 1px 4px #2f2e2e}.console .green{color:#a6e22e}.console .red{color:#fe4481}.console .orange{color:#e6db74}.console div{padding:15px}.console p{margin:30px 0 30px 0!important;word-break:break-all}.dot{width:17px;height:17px;border-radius:100%;display:inline-block;cursor:pointer}.red-dot{background-color:#ff2424}.orange-dot{background-color:#ffa024}.green-dot{background-color:#24ff2f}.console p{color:#fff;padding:5px 30px 30px 30px;margin:0;font-family:sourceCodePro}h2{font-size:2.9em;margin-bottom:0}.w-35 h4{font-size:1.8em;color:#85740b;margin-top:0;margin-bottom:0;padding:0}.w-35 p{font-size:1.3em;text-align:justify}.vertical-align{display:flex!important;flex-direction:column;justify-content:center}.align-right{float:right}.bg-gray .container div{margin-bottom:20px}.table-part{padding:70px 0 50px 0}table{margin:30px 0 60px 0;font-family:"Segoe UI",Roboto,Helvetica;width:100%;border-collapse:collapse}table,td{border:1px solid gray;padding:1em}th{padding:1em}thead{text-align:left;font-size:1.3em;background-color:#292929;color:#fff}tbody{font-size:1.1em}tbody tr:nth-child(even){background-color:#f5f5f5}.bg-yellow h2{margin-top:0}.market-part p{font-family:"Segoe UI",Roboto,Helvetica}footer{background-color:#222121;color:#fff;padding:50px 0 20px 0}footer .w-33{display:flex!important;flex-direction:column;justify-content:flex-start;align-items:center}.column img{height:48px;width:48px;margin-right:15px}.social-network{display:flex;justify-content:center;align-items:center}.footer-paragraph p{max-width:300px}.footer-paragraph{align-items:flex-start!important}footer div p{text-align:center;margin:0}footer .column-wrap p{text-align:justify!important;font-size:1.2em}.w-33 .btn-red{font-size:1.3em}footer .w-33 div{display:flex;align-items:center}.flex-end{display:flex;align-items:flex-end!important}.flex-end p{margin:.5em;font-size:1.3em!important}.flex-end a{color:#fff;text-decoration:none}.social-network img{width:60px;height:60px}.social-network a{margin:15px}@media screen and (min-width:1200px){.container,.navbar{width:1140px}}@media screen and (max-width:992px){.container,.navbar{width:100%;padding:0 15px 0 15px;box-sizing:border-box}header ul li:nth-child(1){display:none;visibility:hidden}.number-part{margin:100px 0 100px 0}.number-part h3{font-size:1.5em}.number-part div .column p{font-size:1.2em}h2{text-align:center;font-size:2.2em;margin-bottom:.7em}.bg-gray h4{font-size:1.5em}.bg-gray p{font-size:1.1em}.flex-center p{font-size:1.4em}.bg-yellow p{font-size:2em}.number-part div .column .key-number{font-size:5em}.console p{font-size:1em}.console{height:unset;word-break:break-all}.bg-gray .container div{margin-bottom:0}.bg-gray{padding:20px 0 20px 0}thead{text-align:center;font-size:1.1em}tbody{font-size:1em}.market-part p{font-size:1.5em}footer .column-wrap p{font-size:1.1em!important}}@media screen and (max-width:768px){.column-wrap .column{width:100%}.column-wrap:nth-child(even){flex-direction:column-reverse}.console{width:100%}.navbar-nav ul li:nth-child(2),ul{padding-left:0}.bg-gray .column-wrap .column{padding-bottom:0}footer .w-33{justify-content:center;padding:15px 0 15px 0;align-items:center!important}.column img{display:none;visibility:hidden}footer .column-wrap p{max-width:400px;font-size:1.3em!important}}@media screen and (max-width:576px){.navbar-brand p,.navbar-nav ul li:nth-child(2){display:none;visibility:hidden}.bg-yellow h1{font-size:2em;word-break:break-all}.bg-yellow p{font-size:1.5em}.bg-gray .column-wrap .column{padding-top:40px}.bg-gray h2{margin:0}.bg-gray{padding:60px 0 60px 0}td:nth-child(3),th:nth-child(3){display:none;visibility:hidden}h2{font-size:2em}.btn-big{font-size:1.3em}.number-part div .column .key-number{font-size:4em}.market-part p{font-size:1.3em}footer .column-wrap p{max-width:unset;margin-bottom:20px}} -------------------------------------------------------------------------------- /examples/example 1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | 9 | 10 | 11 | 12 | TypeLighter.js | The world's lightest yet most powerful JS Typewriter 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 |
26 |
27 | Logo 28 |

TypeLighter.js

29 |
30 | 37 |
38 |
39 |
40 |
41 |
42 |

TypeLighter.js

43 |

The world's lightest yet most powerful JS TypeWriter

44 |

by Edern Clemente.

45 |
46 |
47 |
48 | Free Download 49 |

The original typing experience. Without the noise.

50 |
51 |
52 | 53 |
54 |

Microscopic weight. Tremendous versatility.

55 |
56 |
57 |

58 |

worth of marvellous features.

59 |
60 |
61 |

62 |

lighter than its competitors.

63 |
64 |
65 |
66 |
67 |
68 |

How to use it?

69 |
70 |
71 |
72 |
73 | 74 | 75 | 76 |
77 |

//Place the .js file in your folder and import it after the body tag

78 | <script src ="path/typelighter.min.js"></script>

79 | //You can also use the CDN version :

80 | <script src ="https://cdn.jsdelivr.net/npm/typelighterjs/typelighter.min.js"></script>

81 | //Add a new typewriter

82 | <span class="typeWriter" data-text='["foo"]'></span>

83 |
84 |
85 |
86 |

87 |

In order to install TypeLighter.js, you just have to import it using a script tag. Once done, use the typeWriter class to create new dynamically animated elements. The CSS is automatically injected in the DOM for convenience, though you could also paste it in your CSS file.

88 |
89 |
90 |
91 |
92 |

Deeply

93 |

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.

94 |
95 |
96 |
97 |
98 | 99 | 100 | 101 |
102 |

//Set properties with the data tag to tailor your effect

103 | <p>Deeply <span class="typeWriter" data-max="1.5" data-text='["satisfying.","customizable."]'</span></p>

104 | //Disable random writing

105 | <p>Deeply <span class="typeWriter" data-random="false" data-text='["satisfying."]'></span></p> 106 |

107 |
108 |
109 |
110 |
111 |
112 |
113 |

Properties list

114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 |
PropertyDefault valueUse
data-textNullThe array holding the strings to be written one after the other.
data-speed1The writing speed is proportionnal to this integer.
data-start500 (ms)A delay before writing the next string.
data-end2000 (ms)A delay before deleting the current string.
data-randomTrueWhen enabled, the TypeWriter waits for a random time before writing or deleting the next character.
data-maxInfinityThe maximum number of full iterations before the TypeWriter stops itself.
data-dltSpeedTrueWhen enabled, a given string is deleted twice as fast as it is written.
data-checkVisibleFalseWhen enabled, the animation begins right when the element appears in the viewport.
165 |
166 |
167 |

168 |

Take a stride into the world of dynamic and appealing web design. You can be sure that you will never even think of looking back.

169 | Free download 170 |
171 |
172 |
173 |
174 |
175 |

The world's lightest yet most powerful JS TypeWriter out there.

176 |
177 |
178 | Enjoy 179 |
180 |
181 |
182 | White logo 183 |

TypeLighter.js

184 |
185 | How to use it? 186 |
187 |
188 | 193 |

© 2021 TypeLighter.js by Edern Clemente.

194 |
195 |
196 | 197 | 198 | 199 | --------------------------------------------------------------------------------