build-a-brick-wall.markdown

build a brick wall

Loads TweenMax and jQuery to enable the creation of hassle-free demos

A Pen by GreenSock on CodePen.

License.

index.html

<div class="wall"></div>

<div class="nav">
  <button id="restart">play</button> 
</div>

script.js

var tl = new TimelineLite();

function createWall(container, rows, cols) {
  for (var r = rows; r > -1; r--){
    var y = r * 22;
    for(var c = 0; c < cols; c++){
      var x = (c * 60) + getRandom(2, 8);
      x = (r%2==0) ? x : x + 20;
      var brick = $("<div class='brick'></div>").appendTo(container);
      brick.distance = x;
      TweenLite.set(brick, {x:x, y:y})
    }
  }
}


createWall(".wall", 15, 8)

tl.staggerFrom(".brick", 0.5, {y:-20, ease:Power2.easeIn}, 0.05)

function getRandom(min, max) {
  return min + Math.random() * (max - min);
}

$("#restart").on("click", function() {
  tl.restart();
})

/* This Pen Loads the Following
  jQuery: latest version
  TweenMax: latest version
    -TweenLite
    -TweenMax
    -TimelineLite
    -TimelineMax
    -CSSPlugin
    -BezierPlugin
    -DirectionalRotationPlugin
    -AttrPlugin
    -RoundPropsPlugin
    -EasePack
    
  Please use the minimal amount of code possible to recreate the problem you are experiencing.
  
*/

style.css

body {
  font-family:sans-serif;
  background:#1d1f20;
}

.brick{
  width:50px;
  height:20px;
  position:absolute;
  background-color:#930;
}

.wall {
  position:relative;
  left:-50px;
  width:400px;
  height:350px;
  overflow:hidden;
  background:#ccc;
}

.nav {
  width:600px;
  text-align:right;
}

button {
  padding:10px;
  margin:10px;
}