From 26d45774dca283a91e699d63bff3ad4e3b6235e9 Mon Sep 17 00:00:00 2001 From: Amadeus Demarzi Date: Sat, 26 Jul 2014 01:55:57 -0700 Subject: [PATCH] Improved Typewriter with cursor --- website/source/index.html.erb | 2 +- .../javascripts/app/Engine.Typewriter.js | 72 +++++++++++++++ website/source/javascripts/app/Engine.js | 53 ++++++----- website/source/layouts/_footer.erb | 1 + website/source/stylesheets/_jumbotron.less | 89 +++++++++++++++++++ website/source/stylesheets/main.css | 78 ++++++++++++++++ 6 files changed, 272 insertions(+), 23 deletions(-) create mode 100644 website/source/javascripts/app/Engine.Typewriter.js diff --git a/website/source/index.html.erb b/website/source/index.html.erb index 72fc5b0bd..bec5a295e 100644 --- a/website/source/index.html.erb +++ b/website/source/index.html.erb @@ -3,7 +3,7 @@
-

Build, Combine and Launch Infrastucture

+

Build, Combine, and Launch Infrastucture

diff --git a/website/source/javascripts/app/Engine.Typewriter.js b/website/source/javascripts/app/Engine.Typewriter.js new file mode 100644 index 000000000..17dcf7b0d --- /dev/null +++ b/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 + '_'; + + if (!this.content.length) { + this.running = false; + } + + return this; + } + +}; + +})(window.Engine); diff --git a/website/source/javascripts/app/Engine.js b/website/source/javascripts/app/Engine.js index bfd380dae..be6661693 100644 --- a/website/source/javascripts/app/Engine.js +++ b/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.render = this.render.bind(this); - - this.start(); + this.startEngine(); }, - 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); - }, - - start: function(){ + startEngine: 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); diff --git a/website/source/layouts/_footer.erb b/website/source/layouts/_footer.erb index 148e1b57a..a6d298232 100644 --- a/website/source/layouts/_footer.erb +++ b/website/source/layouts/_footer.erb @@ -40,6 +40,7 @@ + diff --git a/website/source/stylesheets/_jumbotron.less b/website/source/stylesheets/_jumbotron.less index 13a2f14fe..eaac5e19b 100755 --- a/website/source/stylesheets/_jumbotron.less +++ b/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; + } +} diff --git a/website/source/stylesheets/main.css b/website/source/stylesheets/main.css index 843d8d898..8132e6c47 100644 --- a/website/source/stylesheets/main.css +++ b/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;