Automatic Typing Feature

_includes/header.html

@@ -3,7 +3,8 @@
         <div class="header-content-inner">
             <h1>Your Favorite Source of Free Bootstrap Themes</h1>
             <hr>
-            <p>Start Bootstrap can help you build better websites using the Bootstrap CSS framework! Just download your template and start going, no strings attached!</p>
+            <p id="messages" style="display: inline-block;"> </p>
+            <br>
             <a href="#about" class="btn btn-primary btn-xl page-scroll">Find Out More</a>
         </div>
     </div>

_includes/scripts.html

@@ -11,3 +11,6 @@
 
 <!-- Custom Theme JavaScript -->
 <script src="js/creative.js"></script>
+
+<!-- Automatic Typing Feature -->
+<script src="js/autoType.js"></script>

js/autoType.js

@@ -0,0 +1,25 @@
+var text = ["Start Bootstrap can help build better websites using the CSS framework!",
+            "Just download your template and start going, no strings attached!"]; // add more messages here!
+var delay = 50;
+var currentWord = 0;
+var currentChar = 0;
+var dest = document.getElementById("messages");;
+
+function type() {
+    dest.innerHTML = text[currentWord].substr(0, ++currentChar);
+    if (currentChar > text[currentWord].length) setTimeout("unType()", 2000); // delay before erasing message
+    else                                        setTimeout("type()", delay);
+}
+
+function unType() {
+    dest.innerHTML = text[currentWord].substr(0, currentChar);
+    if (--currentChar === 0) {
+        dest.innerHTML = "<br>"; // otherwise page will jump due to line deletion
+        if (currentWord + 1 === text.length) currentWord = 0;
+        else ++currentWord;
+        setTimeout("type()", 750); // delay before typing new message
+    } else setTimeout("unType()", delay/2);
+}
+
+// delay typing for page to partially load
+setTimeout("type()", 3000);