docs(home): adds ripple effect, update timing fn for docs

docs/css/_home.scss

@@ -323,3 +323,47 @@ footer.site-footer .input-group-addon {
   width: 319px;
   height: 180px;
 }
+
+.ripple {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  border-radius: 100px;
+  border: 1px solid #888;
+  -webkit-animation: anim-ripple 1.8s ease-out infinite forwards;
+  animation: anim-ripple 1.8s ease-out infinite forwards;
+  top: 0;
+  left: 50%;
+}
+
+@-webkit-keyframes anim-ripple {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3D(-50%, 10px, 0) scale3d(3, 3, 1);
+    transform: translate3D(-50%, 10px, 0) scale3d(3, 3, 1);
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 0;
+    -webkit-transform:translate3D(-50%, 10px, 0) scale3d(1, 1, 1);
+    transform:translate3D(-50%, 10px, 0) scale3d(1, 1, 1);
+  }
+}
+
+@keyframes anim-ripple {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3D(-50%, 10px, 0) scale3d(3, 3, 1);
+    transform: translate3D(-50%, 10px, 0) scale3d(3, 3, 1);
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3D(-50%, 10px, 0) scale3d(1, 1, 1);
+    transform: translate3D(-50%, 10px, 0) scale3d(1, 1, 1);
+  }
+}

docs/index.haml

@@ -17,6 +17,7 @@ layout: default
         %div.index-container
           %svg.index
             = File.read('img/illus-index.svg')
+          %div.ripple
         %p We’ve created the fastest, easiest way to search within documentation.
         %p And best of all? It’s free!
       %form#join-form{action: '#', method: 'POST'}

docs/js/animation.js

@@ -1,15 +1,17 @@
 document.addEventListener("DOMContentLoaded", function(){
   var box = getIndexDomPosition();
 
-  var center = [box[0] , box[1] + 30];
+  var center = [box[0], box[1] + 40];
 
   var particles = [];
   for(var i=0; i<10; i++) {
     setTimeout(function(){
       var p = genParticle(center);
       particles.push(p);
-    }, i * 300);
+    }, i * 600);
   }
+  
+  var ripples = [];
 
   window.requestAnimationFrame(function loop(){
     window.requestAnimationFrame(loop);
@@ -71,7 +73,7 @@ document.addEventListener("DOMContentLoaded", function(){
 
     var pos = [p.pos[0] - 18, p.pos[1] - 23];
     p.e.style.transform = 'translate(' + pos[0] + 'px, ' + pos[1] + 'px) rotate('+ p.r + 'deg)';
-    p.e.style.opacity = 1 - Math.pow( 2 * toCenter - 1 , 10);
+    p.e.style.opacity = 1 - Math.max(0, Math.sqrt(Math.pow(4 * toCenter - 2, 2)) - 1) 
     p.e.className = 'doc-page';
   }
 
@@ -90,7 +92,7 @@ document.addEventListener("DOMContentLoaded", function(){
   }
 
   function getIndexDomPosition() {
-    var position = jQuery('#index')[0].getBBox();
+    var position = document.querySelector('#index').getBBox();
     return [position.x , position.y ];
   }
 });