Typewriter JQuery Effect?

This is an interesting effect that can be achieved via different methods.

One way is to use Typed.js - this is a Jquery plugin that allows you to achieve the desired typewriter effect.

Examples of the plugin in action can be seen here:

http://patrickelhage.com/ https://commando.io/

Installation

Download typed.js from Github and add the script tag to your HTML, make sure you have jquery included as well.

<script src="jquery.js"></script>
<script src="typed.js"></script>

Initializing the plugin

Add the following code above the closing body tag on the page to activate the plugin.

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

The HTML

Looking back at the above code snippet, we can see that the class used in the function was .element - you can make it anything you want. Now we move on and add the class to a span element.

<span class="element">
<p>Write any text you want</p>
<p>Watch it type itself out</p>
</span>

To see more options and instructions, refer to the Github page and check it out.

A CSS-only approach is also possible

The following pen illustrates this and shows how its done

http://codepen.io/Mrshcom/pen/uHEpv

Best of Luck and let me know if you're still having problems.

To make the letters appear one after another, you're going to want to take a look at creating a custom effect using the animate method.

I'm going to explain this the simplest way I can conceptually, then you can tinker with it and perfect it if you want to turn it into reusable code.

The easiest way I can think to do this is to take each letter in the H1 tag and wrap it in it's own span with an ID set to a number.

For example, "ROY" would be:

<h1>
     <span id="1">R</span> <span id="2">O</span><span id="3">Y</span>
</h1>

You would use CSS to set the initial opacity of the spans to 0. Setting the opacity to 0 rather than setting the display to none holds the space the element is in rather than collapsing the HTML. Display none actually removes the element from the document flow.

Then you'll use the animate method to change the opacity of the first letter from 0 to 1.

You'll have to daisy chain the letters together by passing the function that animates the next letter into the complete parameter of the animate method. If you don't the animations will all run asynchronously.

I'll leave you to work out the details, but that's what you're doing on the conceptual level.