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);