77 lines
1.9 KiB
JavaScript
77 lines
1.9 KiB
JavaScript
var HashiCubes = function() {
|
|
var $cube = $('.cube');
|
|
var $cubes = $('#cubes');
|
|
|
|
var ROWS = 4;
|
|
var PADDING = 64;
|
|
|
|
function getRadiansForAngle(angle) {
|
|
return angle * (Math.PI/180);
|
|
}
|
|
|
|
function animateCubes() {
|
|
$lastCube = $cube;
|
|
previousRowLeft = parseInt($lastCube.css('left'), 10)
|
|
previousRowTop = parseInt($lastCube.css('top'), 10);
|
|
|
|
var angle = getRadiansForAngle(30);
|
|
var sin = Math.sin(angle) * PADDING;
|
|
var cos = Math.cos(angle) * PADDING;
|
|
|
|
// set up our parent columns
|
|
for(var i = 0; i < ROWS; i++){
|
|
var cube = $lastCube.clone();
|
|
|
|
cube.css({
|
|
top: previousRowTop - sin,
|
|
left: previousRowLeft - cos,
|
|
});
|
|
$cubes.prepend(cube);
|
|
$lastCube = cube;
|
|
previousRowLeft = parseInt($lastCube.css('left'), 10)
|
|
previousRowTop = parseInt($lastCube.css('top'), 10)
|
|
}
|
|
|
|
// use the parent cubes as starting point for rows
|
|
var $allParentCubes = $('.cube');
|
|
var angle = getRadiansForAngle(150);
|
|
var sin = Math.sin(angle) * PADDING;
|
|
var cos = Math.cos(angle) * PADDING;
|
|
|
|
for(var j = ROWS; j > -1 ; j--){
|
|
var $baseCube = $($allParentCubes[j]);
|
|
|
|
previousRowLeft = parseInt($baseCube.css('left'), 10)
|
|
previousRowTop = parseInt($baseCube.css('top'), 10)
|
|
|
|
for(var n = 0; n < ROWS; n++){
|
|
var cube = $baseCube.clone();
|
|
cube.css({
|
|
top: previousRowTop - sin,
|
|
left: previousRowLeft - cos,
|
|
});
|
|
|
|
$cubes.prepend(cube);
|
|
|
|
$lastCube = cube;
|
|
previousRowLeft = parseInt($lastCube.css('left'), 10)
|
|
previousRowTop = parseInt($lastCube.css('top'), 10)
|
|
}
|
|
}
|
|
|
|
var $all = $('.cube');
|
|
for(var c = 0; c < $all.length; c++){
|
|
(function(index){
|
|
setTimeout(function(){
|
|
var $theCube = $($all[index]);
|
|
$theCube.addClass('in')
|
|
}, 100*c)
|
|
})(c)
|
|
}
|
|
}
|
|
|
|
animateCubes();
|
|
}
|
|
|
|
$(document).on('turbolinks:load', HashiCubes);
|