jQuery typewriter effect

Typed.js is a jQuery plugin that types! Show you texts in a cool way.

jQuery typewriter effect plugin

With this solution we can enter in any string, and watch it type at the speed we’ve set, backspace what it’s typed, and begin a new sentence for however many strings you’ve set.

A nice jQuery typewriter effect
A nice jQuery typewriter effect

Usage

<script src="jquery.js"></script>
<script src="typed.js"></script>
<script>
  $(function(){
      $(".element").typed({
        strings: ["First sentence.", "Second sentence."],
        typeSpeed: 0
      });
  });
</script>

...

<div class="element"></div>

We also need some CSS for the animated blinking cursor:

.typed-cursor {
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}

@keyframes blink {
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

@-webkit-keyframes blink {
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

@-moz-keyframes blink {
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

That’s it.

Demo and more information at homepage:

http://www.mattboldt.com/demos/typed-js

GitHub:

https://github.com/mattboldt/typed.js

Download:

https://github.com/mattboldt/typed.js/archive/master.zip

See also:

https://github.com/mattboldt/typed.js/wiki

Type your heart out, with Typed.js

Enjoy!

Share:Share on Facebook2Share on Google+0Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1