Add Larry

Author: mjackson

assets/application.js

@@ -1,4 +1,5 @@
 (function ($, undefined) {
+
   // Put custom repo URL's in this object, keyed by repo name.
   var repoUrls = {
     "bootstrap": "http://twitter.github.com/bootstrap/",
@@ -114,4 +115,89 @@
     });
   });
 
+  function randomItem(array) {
+    return array[Math.floor(Math.random() * array.length)];
+  }
+
+  var $flyzone;
+
+  function flyzone() {
+    if (!$flyzone) {
+      $flyzone = $("<div>").attr("id", "flyzone").prependTo(document.body);
+    }
+
+    return $flyzone;
+  }
+
+  var sizes = ["smaller", "small", "medium", "large", "fat"];
+
+  var sizeDimensions = {
+    "smaller": 20,
+    "small": 50,
+    "medium": 100,
+    "large": 200,
+    "fat": 300
+  };
+
+  var speeds = ["slow", "medium", "fast"];
+
+  var speedDurations = {
+    "slow": 45000,
+    "medium": 30000,
+    "fast": 20000
+  };
+
+  function makeLarry(sizeName, speedName) {
+    var size = sizeDimensions[sizeName];
+    var top = Math.floor((flyzone().height() - size) * Math.random());
+
+    var $img = $("<img>")
+      .addClass("larry size-" + sizeName)
+      .attr("src", "assets/larry.png")
+      .attr("width", size)
+      .attr("height", size)
+      .css({
+        position: "absolute",
+        opacity: Math.random(),
+        top: top,
+        left: -size
+      });
+
+    $img.prependTo(flyzone());
+
+    var left = flyzone().width() + size;
+    var speed = speedDurations[speedName];
+
+    $img.animate({left: left}, speed, function () {
+      $img.remove();
+      makeRandomLarry();
+    });
+
+    return $img;
+  }
+
+  function makeRandomLarry() {
+    var size = randomItem(sizes);
+    var speed = randomItem(speeds);
+    return makeLarry(size, speed);
+  }
+
+  $(function () {
+    $("#logo").click(function () {
+      makeRandomLarry();
+    });
+  });
+
+  var match = (/\blarry(=(\d+))?\b/i).exec(window.location.search);
+
+  if (match) {
+    var n = parseInt(match[2]) || 20;
+
+    $(function () {
+      for (var i = 0; i < n; ++i) {
+        setTimeout(makeRandomLarry, Math.random() * n * 500);
+      }
+    });
+  }
+
 })(jQuery);

assets/larry.png

@@ -31,6 +31,7 @@ a:hover {
 }
 
 #wrapper {
+  position: relative;
   width: 960px;
   margin: 0 auto;
   padding: 20px 0;
@@ -204,3 +205,48 @@ li.repo h3 {
 .repo.python::after {
   border-right-color: #6aad2d;
 }
+
+@keyframes small-swing { 0% { margin-top: 0px } 50% { margin-top: -10px } 100% { margin-top: 0px } }
+@-moz-keyframes small-swing { 0% { margin-top: 0px } 50% { margin-top: -10px } 100% { margin-top: 0px } }
+@-webkit-keyframes small-swing { 0% { margin-top: 0px } 50% { margin-top: -10px } 100% { margin-top: 0px } }
+@-ms-keyframes small-swing { 0% { margin-top: 0px } 50% { margin-top: -10px } 100% { margin-top: 0px } }
+
+@keyframes medium-swing { 0% { margin-top: 0px } 50% { margin-top: -20px } 100% { margin-top: 0px } }
+@-moz-keyframes medium-swing { 0% { margin-top: 0px } 50% { margin-top: -20px } 100% { margin-top: 0px } }
+@-webkit-keyframes medium-swing { 0% { margin-top: 0px } 50% { margin-top: -20px } 100% { margin-top: 0px } }
+@-ms-keyframes medium-swing { 0% { margin-top: 0px } 50% { margin-top: -20px } 100% { margin-top: 0px } }
+
+@keyframes large-swing { 0% { margin-top: 0px } 50% { margin-top: -40px } 100% { margin-top: 0px } }
+@-moz-keyframes large-swing { 0% { margin-top: 0px } 50% { margin-top: -40px } 100% { margin-top: 0px } }
+@-webkit-keyframes large-swing { 0% { margin-top: 0px } 50% { margin-top: -40px } 100% { margin-top: 0px } }
+@-ms-keyframes large-swing { 0% { margin-top: 0px } 50% { margin-top: -40px } 100% { margin-top: 0px } }
+
+.larry.size-smaller, .larry.size-small {
+  animation: small-swing 1.5s infinite ease-in-out;
+  -moz-animation: small-swing 1.5s infinite ease-in-out;
+  -webkit-animation: small-swing 1.5s infinite ease-in-out;
+  -ms-animation: small-swing 1.5s infinite ease-in-out;
+}
+
+.larry.size-medium, .larry.size-large {
+  animation: medium-swing 1.5s infinite ease-in-out;
+  -moz-animation: medium-swing 1.5s infinite ease-in-out;
+  -webkit-animation: medium-swing 1.5s infinite ease-in-out;
+  -ms-animation: medium-swing 1.5s infinite ease-in-out;
+}
+
+.larry.size-medium, .larry.size-fat {
+  animation: large-swing 1.5s infinite ease-in-out;
+  -moz-animation: large-swing 1.5s infinite ease-in-out;
+  -webkit-animation: large-swing 1.5s infinite ease-in-out;
+  -ms-animation: large-swing 1.5s infinite ease-in-out;
+}
+
+#flyzone {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}