Improved Typewriter with cursor

website/source/index.html.erb

@@ -3,7 +3,7 @@
 	<div id="jumbotron">
 		<div class="galaxy-image" id="galaxy-bg"></div>
 		<div class="jumbotron-content" id="jumbotron-content">
-			<h2 class="tag-line" id="tag-line">Build, Combine and Launch Infrastucture</h2>
+			<h2 class="tag-line" id="tag-line">Build, Combine, and Launch Infrastucture</h2>
 		</div>
 	</div>
 </div>

website/source/javascripts/app/Engine.Typewriter.js

@@ -0,0 +1,72 @@
+/* jshint unused:false */
+/* global console */
+(function(Engine){ 'use strict';
+
+Engine.Typewriter = function(element){
+	this.element = element;
+	this.content = this.element.textContent.split('');
+	this.element.innerHTML = '';
+
+	console.dir(this);
+};
+
+Engine.Typewriter.prototype = {
+
+	running: false,
+
+	letterInterval : 0.02,
+	spaceInterval  : 0.4,
+
+	charCount: -1,
+	waitSpace: false,
+
+	toDraw: '',
+
+	start: function(){
+		if (!this.content.length) {
+			return this;
+		}
+
+		this._last = this.letterInterval;
+		this.running = true;
+	},
+
+	update: function(engine){
+		var newChar;
+
+		if (!this.running) {
+			return this;
+		}
+
+		this._last += engine.tick;
+
+		if (this.waitSpace && this._last < this.spaceInterval) {
+			return this;
+		}
+
+		if (!this.waitSpace && this._last < this.letterInterval){
+			return this;
+		}
+
+		this._last = 0;
+		newChar = this.content.shift();
+		this.toDraw += newChar;
+
+		if (newChar === ',') {
+			this.waitSpace = true;
+		} else {
+			this.waitSpace = false;
+		}
+
+		this.element.innerHTML = this.toDraw + '<span class="cursor">_</span>';
+
+		if (!this.content.length) {
+			this.running = false;
+		}
+
+		return this;
+	}
+
+};
+
+})(window.Engine);

website/source/javascripts/app/Engine.js

@@ -58,27 +58,12 @@ Engine = Base.extend({
 		this.setupEvents();
 		this.setupStarfield();
 		this.setupTessellation();
+		this.setupMisc();
 
-		this.last = Date.now() / 1000;
+		this.startEngine();
-		this.render = this.render.bind(this);
-
-		this.start();
 	},
 
-	setupEvents: function(){
+	startEngine: function(){
-		this.resize = this.resize.bind(this);
-		this.resize();
-		window.addEventListener('resize', this.resize, false);
-
-		this._handleScroll = this._handleScroll.bind(this);
-		this._handleScroll();
-		window.addEventListener('scroll', this._handleScroll, false);
-
-		this._handleMouseCoords = this._handleMouseCoords.bind(this);
-		window.addEventListener('mousemove', this._handleMouseCoords, false);
-	},
-
-	start: function(){
 		var parent = this.canvas.parentNode;
 
 		this.background.className += ' show';
@@ -89,10 +74,6 @@ Engine = Base.extend({
 			.then(function(){
 				this.starGeneratorRate = 200;
 			}, this)
-			.wait(1000)
-			.then(function(){
-				this.showGrid = true;
-			}, this)
 			.wait(2000)
 			.then(function(){
 				parent.className += ' state-one';
@@ -115,11 +96,37 @@ Engine = Base.extend({
 			}, this)
 			.wait(1000)
 			.then(function(){
+				this.showGrid = true;
+			}, this)
+			.wait(1000)
+			.then(function(){
+				this.typewriter.start();
 			}, this);
 
 		this.render();
 	},
 
+
+	setupMisc: function(){
+		this.last = Date.now() / 1000;
+		this.render = this.render.bind(this);
+
+		this.typewriter = new Engine.Typewriter(this.tagLine);
+	},
+
+	setupEvents: function(){
+		this.resize = this.resize.bind(this);
+		this.resize();
+		window.addEventListener('resize', this.resize, false);
+
+		this._handleScroll = this._handleScroll.bind(this);
+		this._handleScroll();
+		window.addEventListener('scroll', this._handleScroll, false);
+
+		this._handleMouseCoords = this._handleMouseCoords.bind(this);
+		window.addEventListener('mousemove', this._handleMouseCoords, false);
+	},
+
 	setupStarfield: function(){
 		this.particles = [];
 		// this.generateParticles(50, true);
@@ -243,6 +250,8 @@ Engine = Base.extend({
 				.draw(this.context, scale, this);
 		}
 
+		this.typewriter.update(this);
+
 		this.last = this.now;
 
 		this.generateParticles(this.starGeneratorRate * this.tick >> 0);

website/source/layouts/_footer.erb

@@ -40,6 +40,7 @@
 <script type="text/javascript" src="/javascripts/app/Engine.Polygon.Puller.js"></script>
 <script type="text/javascript" src="/javascripts/app/Engine.Shape.js"></script>
 <script type="text/javascript" src="/javascripts/app/Engine.Shape.Puller.js"></script>
+<script type="text/javascript" src="/javascripts/app/Engine.Typewriter.js"></script>
 <script type="text/javascript" src="/javascripts/app/Init.js"></script>
 
 </body>

website/source/stylesheets/_jumbotron.less

@@ -306,3 +306,92 @@
        -o-transform:translate3d(0,0,0) scale(1,1);
           transform:translate3d(0,0,0) scale(1,1);
 }
+
+.cursor {
+  font-weight:bold;
+
+  -webkit-animation:Blink 800ms infinite;
+     -moz-animation:Blink 800ms infinite;
+      -ms-animation:Blink 800ms infinite;
+       -o-animation:Blink 800ms infinite;
+          animation:Blink 800ms infinite;
+}
+
+@-webkit-keyframes Blink {
+	0% {
+		opacity:1;
+	}
+	50% {
+		opacity:1;
+
+	}
+	51% {
+		opacity:0;
+	}
+	100% {
+		opacity:0;
+	}
+}
+
+@-moz-keyframes Blink {
+	0% {
+		opacity:1;
+	}
+	50% {
+		opacity:1;
+	}
+	51% {
+		opacity:0;
+	}
+	100% {
+		opacity:0;
+	}
+}
+
+@-ms-keyframes Blink {
+	0% {
+		opacity:1;
+
+	}
+	50% {
+		opacity:1;
+	}
+	51% {
+		opacity:0;
+	}
+	100% {
+		opacity:0;
+	}
+}
+
+@-o-keyframes Blink {
+	0% {
+		opacity:1;
+
+	}
+	50% {
+		opacity:1;
+	}
+	51% {
+		opacity:0;
+	}
+	100% {
+		opacity:0;
+	}
+}
+
+@keyframes Blink {
+	0% {
+		opacity:1;
+
+	}
+	50% {
+		opacity:1;
+	}
+	51% {
+		opacity:0;
+	}
+	100% {
+		opacity:0;
+	}
+}

website/source/stylesheets/main.css

@@ -819,6 +819,84 @@ body.page-home #footer {
   -o-transform: translate3d(0, 0, 0) scale(1, 1);
   transform: translate3d(0, 0, 0) scale(1, 1);
 }
+.cursor {
+  font-weight: bold;
+  -webkit-animation: Blink 800ms infinite;
+  -moz-animation: Blink 800ms infinite;
+  -ms-animation: Blink 800ms infinite;
+  -o-animation: Blink 800ms infinite;
+  animation: Blink 800ms infinite;
+}
+@-webkit-keyframes Blink {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 1;
+  }
+  51% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@-moz-keyframes Blink {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 1;
+  }
+  51% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@-ms-keyframes Blink {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 1;
+  }
+  51% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@-o-keyframes Blink {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 1;
+  }
+  51% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes Blink {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 1;
+  }
+  51% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0;
+  }
+}
 .outline-btn {
   background-color: transparent;
   color: #ffffff;