A Pen by AkdM.

index.html

<link href='http://fonts.googleapis.com/css?family=Londrina+Outline' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<div class="credits">Thanks to <a href="http://codepen.io/oknoblich/pen/Erjiw">oknoblich</a> for the CSS background</div>

<div class="writeit"></div>

script.js

// Create the array with the text you want to write
var txt2write = new Array(
    "Hello, welcome on CodePen.",
    "Here's another line !"
    );

// Variables
var speed = 60; // You can set the speed here. + is slower
var index = 0;
text_pos = 0;
var str_length = txt2write[0].length;
var contents, row;

// Function
function type_text() {
    // Init the content with blank
    contents = '';
    row = Math.max(0, index - 9);
    while (row < index) {
        // Each sentence will end with a <br />
        contents += txt2write[row++] + '\r<br />';
    }

    // Write the text
    $( "div.writeit" ).html( contents + txt2write[index].substring(0, text_pos) + "<span class='after'>_</span>" );

    if (text_pos++ == str_length) {
        text_pos = 0;
        index++;
        if (index != txt2write.length) {
            str_length = txt2write[index].length;
            setTimeout("type_text()", 800);
        }
    } else {
        setTimeout("type_text()", speed);
    }

}

type_text();

style.css

html, body {
  height: 100%;
  color: #FFF;
  font-family: 'Londrina Outline', cursive;
}

html {
  background-image: linear-gradient(to bottom, #5588cc 0%, #3162a3 100%);
}

body {  
  background-image: linear-gradient(0deg, transparent 0%, transparent 9px, rgba(255, 255, 255, 0.2) 9px, rgba(255, 255, 255, 0.2) 10px, transparent 10px, transparent 19px, rgba(255, 255, 255, 0.1) 19px, rgba(255, 255, 255, 0.1) 20px, transparent 20px, transparent 29px, rgba(255, 255, 255, 0.1) 29px, rgba(255, 255, 255, 0.1) 30px, transparent 30px, transparent 39px, rgba(255, 255, 255, 0.1) 39px, rgba(255, 255, 255, 0.1) 40px, transparent 40px, transparent 49px, rgba(255, 255, 255, 0.1) 49px, rgba(255, 255, 255, 0.1) 50px), linear-gradient(-90deg, transparent 0%, transparent 9px, rgba(255, 255, 255, 0.2) 9px, rgba(255, 255, 255, 0.2) 10px, transparent 10px, transparent 19px, rgba(255, 255, 255, 0.1) 19px, rgba(255, 255, 255, 0.1) 20px, transparent 20px, transparent 29px, rgba(255, 255, 255, 0.1) 29px, rgba(255, 255, 255, 0.1) 30px, transparent 30px, transparent 39px, rgba(255, 255, 255, 0.1) 39px, rgba(255, 255, 255, 0.1) 40px, transparent 40px, transparent 49px, rgba(255, 255, 255, 0.1) 49px, rgba(255, 255, 255, 0.1) 50px);
  background-size: 50px 50px;
}

.writeit {
  font-size: 20pt;
  line-height: 53px;
  text-align: center;
  padding: 31.5px 0 70px 0;
}
  
.after {
-webkit-animation-delay: 500ms; -moz-animation-delay: 500ms; -ms-animation-delay: 500ms; -o-animation-delay: 500ms; animation-delay: 500ms;
  animation: blink 1.3s infinite;
}

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

.credits {
  font-size: 20pt;
  text-align: center;
  padding: 13px 0 0px 0;
}

.credits a {
  color: #FFF
}

Text-Write-Animation.markdown

Text Write Animation

A simple write animation. with JS and jQuery.

Thanks to oknoblich for the pure CSS Background ! -> http://codepen.io/oknoblich/pen/Erjiw

A Pen by AkdM on CodePen.

License.