Sometimes you write some text repeated or display like typing at that time you can use typed js. using this js you can see you text display like some one was typing. we can just put our text in to p tag. and then one by one p tag was print. typed.js can not take to load time. and you can easily implement in your project. typed.js support all the browser.

We allows to free snippets of typed js example , you can download full code of typed.js cdn layout. Here in this post i will give you example of typewriter effect snippet and you will get simple code of html, css and jquery. In typing animation jquery snippet i give you three tab with html, css and js, you can easily get code of html typing text effect layout.


<!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.6/typed.min.js"></script> </head> <body> <div class="section-main"> <h2>Example of Typed.js</h2> <div id="typed-strings"> <p>This is example of <strong>Typed.js</strong>.</p> <p>It types out sentences automatically.</p> <p>And then deletes them.</p> <p>Try it !!!</p> </div> <div class="type-wrap"></div> </div> <script> var typed = new Typed(".type-wrap", { stringsElement: '#typed-strings', typeSpeed: 100, backSpeed: 0, shuffle: false, fadeOut: false, fadeOutClass: 'typed-fade-out', fadeOutDelay: 500, }); </script> </body> </html>
body{ background-color: #05849E; } .section-main{ color: white; width: 50%; margin: auto; } .type-wrap{ background-color: white; color: #05849E; border-radius: 3px; padding: 0px 15px; height: 40px; line-height: 40px; } strong{ color: black; } .typed-cursor{ display: none; }

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:





Random Post


Random Blog