github.com/diptanu/nomad@v0.5.7-0.20170516172507-d72e86cbe3d9/website/source/assets/javascripts/_cubes.js (about) 1 var HashiCubes = function() { 2 var $cube = $('.cube'); 3 var $cubes = $('#cubes'); 4 5 var ROWS = 4; 6 var PADDING = 64; 7 8 function getRadiansForAngle(angle) { 9 return angle * (Math.PI/180); 10 } 11 12 function animateCubes() { 13 $lastCube = $cube; 14 previousRowLeft = parseInt($lastCube.css('left'), 10) 15 previousRowTop = parseInt($lastCube.css('top'), 10); 16 17 var angle = getRadiansForAngle(30); 18 var sin = Math.sin(angle) * PADDING; 19 var cos = Math.cos(angle) * PADDING; 20 21 // set up our parent columns 22 for(var i = 0; i < ROWS; i++){ 23 var cube = $lastCube.clone(); 24 25 cube.css({ 26 top: previousRowTop - sin, 27 left: previousRowLeft - cos, 28 }); 29 $cubes.prepend(cube); 30 $lastCube = cube; 31 previousRowLeft = parseInt($lastCube.css('left'), 10) 32 previousRowTop = parseInt($lastCube.css('top'), 10) 33 } 34 35 // use the parent cubes as starting point for rows 36 var $allParentCubes = $('.cube'); 37 var angle = getRadiansForAngle(150); 38 var sin = Math.sin(angle) * PADDING; 39 var cos = Math.cos(angle) * PADDING; 40 41 for(var j = ROWS; j > -1 ; j--){ 42 var $baseCube = $($allParentCubes[j]); 43 44 previousRowLeft = parseInt($baseCube.css('left'), 10) 45 previousRowTop = parseInt($baseCube.css('top'), 10) 46 47 for(var n = 0; n < ROWS; n++){ 48 var cube = $baseCube.clone(); 49 cube.css({ 50 top: previousRowTop - sin, 51 left: previousRowLeft - cos, 52 }); 53 54 $cubes.prepend(cube); 55 56 $lastCube = cube; 57 previousRowLeft = parseInt($lastCube.css('left'), 10) 58 previousRowTop = parseInt($lastCube.css('top'), 10) 59 } 60 } 61 62 var $all = $('.cube'); 63 for(var c = 0; c < $all.length; c++){ 64 (function(index){ 65 setTimeout(function(){ 66 var $theCube = $($all[index]); 67 $theCube.addClass('in') 68 }, 100*c) 69 })(c) 70 } 71 } 72 73 animateCubes(); 74 } 75 76 $(document).on('turbolinks:load', HashiCubes);