Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
 <div class="grid">
   <div class="grid-item"></div>
   <div class="grid-item"></div>
   <div class="grid-item" style="height: 245px;"></div>
   <div class="grid-item"></div>
   <div class="grid-item" style="height: 290px;"></div>
   <div class="grid-item"></div>
   <div class="grid-item" style="height: 140px;"></div>
   <div class="grid-item" style="height: 200px"></div>
   <div class="grid-item" style="height: 150px"></div>
   <div class="grid-item"></div>
   <div class="grid-item" style="height: 220px"></div>
   <div class="grid-item" style="height: 205px"></div>
   <div class="grid-item"></div>
   <div class="grid-item"></div>
   <div class="grid-item"></div>
   <div class="grid-item"></div>
  </div>
  <script src="http://dynamicsjs.com/lib/dynamics.js"></script>
  <script src="http://henriquea.github.io/minigrid/js/minigrid.js"></script>
</body>
</html>
 
.grid {
  
  position: relative;
​
  /* fluffy */
  margin: 0 auto;
  width: 98%;
  /* end fluffy */
}
​
.grid-item {
  position: absolute;
​
   /* fluffy */
  opacity: 0;
   box-shadow: 1px 1px #9E9E9E;
   width: 180px;
   height: 120px;
   border-radius: 3px;
   background-color: #536DFE;
   /* end fluffy */
​
}
 
(function(){
  
 function animate(item, x, y, index) {
   dynamics.animate(item, {
     translateX: x,
     translateY: y,
     opacity: 1
    }, {
      type: dynamics.spring,
      duration: 800,
      frequency: 120,
      delay: 100 + index * 30
    });
  }
  
  minigrid('.grid', '.grid-item', 6, animate);
​
  window.addEventListener('resize', function(){
    minigrid('.grid', '.grid-item', 6, animate);
  });
})();
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
henriqueapro
0viewers