QWERTY fill: a letter by letter animation from keyboard keys.

fills/css/qwerty.css

@@ -0,0 +1,63 @@
+#qwerty {
+  font-size: 35px;
+/*  padding-left:10px;*/
+}
+.letter {
+  position: absolute;
+/*  font-size:.8em;*/
+  -webkit-transition: all 1.2s;
+  -webkit-transition-delay: all 1.2s;
+  color: #fc0;
+}
+
+#ref, .letter {
+}
+
+#ref {
+  visibility: hidden;
+  padding-top: 200px;
+  padding-left: 20px;
+}
+
+.letters_container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  -webkit-transition: all 3.5s;
+  transition: all 3.5s;
+  -webkit-transition-delay: 1s;
+  transition-delay: 1s;
+  opacity: 1;
+}
+
+.word_ref {
+/*  white-space:nowrap;*/
+}
+
+#keys {
+  position: absolute;
+  left: 50px;
+/*  bottom: 50px;*/
+  top: 10px;
+  font-size: 1em;
+}
+
+#keys div > span {
+  display: inline-block;
+  width: 40px;
+  text-align: center;
+  border: 1px solid #000;
+  border-radius: 8px;
+  margin: 2px;
+  color: #fff;
+  background: #000;
+}
+#keys div {
+  line-height: 1;
+}
+#keys div:nth-child(2) {
+  margin-left: 15px;
+}
+#keys div:nth-child(3) {
+  margin-left: 30px;
+}

fills/qwerty.js

@@ -0,0 +1,103 @@
+var qwerty = function(id) {
+  fontClass = "franklin-gothic-condensed";//museo-slab-100
+  function position($letter, pos, origin) {
+    $letter.css({
+      left: pos.left - origin.left,
+      top: pos.top - origin.top,
+      "font-size": pos["font-size"],
+    });
+  }
+  function flyTo($letter, pos, origin, delay) {
+    delay = delay || 0
+    setTimeout(function() {
+      position($letter, pos, origin);
+    }, 300 + delay);
+  }
+  return {
+		name: "Qwerty",
+		defaultURL: "http://www.youtube.com/watch?v=YLO7tCdBVrA",
+
+		el: $('<div class="modeContainer ' + fontClass + '" id="'+id+'"></div>'),		
+
+		init: function() {
+			this.$main = $("<div id='qwerty' class='container'></div>").appendTo(this.el);
+			this.letterStr = ["qwertyuiop", "asdfghjkl", "zxcvbnm,."];
+			keyspans = this.letterStr.map(function(str) {
+			  return '<div>' + 
+  			  (str).toUpperCase().replace(/(.)/g, "<span><span data-letter='$1'>$1</span></span>") +
+  			  '</div>';
+		  }).join('');
+		  this.letterStr = this.letterStr.join('')
+			this.$keys = $("<div id='keys'>" + keyspans + "</div>").appendTo(this.$main);
+			this.$ref = $("<div id='ref'></div>").appendTo(this.$main);
+			this.$letters = $("<div class='letters_container'></div>").appendTo(this.$main);
+		},
+
+		enter: function() {
+			this.origin = this.$main.offset()
+			console.log(this.origin)
+		},
+
+		handleWord: function(msg) {
+      // console.log('word '+msg.word,msg);
+			this.appendWordInContext(msg);
+		},
+
+		// HANDLE INCOMING sentenceEnd MESSAGE.
+		// Called each time a new sentence is complete.
+		handleSentenceEnd: function(msg) {
+			//console.log('sentenceEnd');	
+		},
+
+		// HANDLE INCOMING stats MESSAGE.
+		// Called with each sentence.
+		// Passes a collection of interesting language statistics.
+		handleStats: function(msg) {
+      // console.log('stats', msg);
+      this.$ref.empty();
+
+      var $out = this.$letters;
+      $out.css({
+        top: 600,
+        opacity: 0
+      });
+      setTimeout(function() {
+        $out.remove()
+      }, 4000)
+      this.$letters = $("<div class='letters_container'></div>").appendTo(this.$main);
+		},
+
+		// APPEND WORD TO DOM.
+		// This is where you insert your words into the DOM.
+		appendWordInContext: function(msg) {
+		  if($.inArray('punct', msg.cats) == -1) 
+  		  this.$ref.append('<span> </span>');
+
+		  word = msg.word;
+		  var _this = this;
+		  $wordRef = $('<span class="word_ref"></span>').appendTo(this.$ref);
+
+		  letters = word.split('').forEach(function(letter, i) {
+		    if(_this.letterStr.indexOf(letter.toLowerCase()) == -1) return;
+  		  $letterSrc = _this.$keys.find("span[data-letter='" + letter.toUpperCase() + "']");
+  		  if (!$letterSrc || $letterSrc.length == 0) return;
+        start = $letterSrc.offset();
+        start["font-size"] = "1em";//"2em";
+        $letterRef = $('<span>' + letter.toUpperCase() + '</span>').appendTo($wordRef);
+        end = $letterRef.offset();
+        end["font-size"] = "1em";
+        $letter = $('<div class="letter">' + letter.toUpperCase() + '</span>').appendTo(_this.$letters);
+        if($.inArray('negemo', msg.cats) > -1 || $.inArray('you', msg.cats) > -1) 
+          $letter.css('color', '#c00');
+        else if($.inArray('posemo', msg.cats) > -1) 
+          $letter.css('color', '#0f6');
+        else if($.inArray('verb', msg.cats) > -1) 
+          $letter.css('color', '#0cf');
+        position($letter, start, _this.origin);
+        flyTo($letter, end, _this.origin, i * 50);
+		  });
+	  }
+
+
+  };
+};