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="demo">
​
  <div class="cards">
    <div class="card">
      <div class="card-wrapper">
        <div class="card-image">
          <img src="https://s-media-cache-ak0.pinimg.com/236x/2a/30/13/2a3013448eb806e51da5de96eb38cf36.jpg" />
        </div>
        <div class="card-info">
          Villetta Barrea and Scanno, Abruzzo, Italy
        </div>
      </div>
    </div>
​
    <div class="card">
      <div class="card-wrapper">
        <div class="card-image">
          <img src="https://s-media-cache-ak0.pinimg.com/236x/fa/a2/41/faa24120c4689443e2169366972cb194.jpg" />
        </div>
        <div class="card-info">
          Vøringfossen, Norway
        </div>
      </div>
    </div>
​
    <div class="card">
      <div class="card-wrapper">
        <div class="card-image">
          <img src="https://s-media-cache-ak0.pinimg.com/236x/f9/06/4c/f9064c91a4f63705e5a4408cda6739de.jpg" />
        </div>
        <div class="card-info">
          Theogefiro, Zitsa, Greece
        </div>
      </div>
    </div>
​
    <div class="card">
      <div class="card-wrapper">
        <div class="card-image">
          <img src="https://s-media-cache-ak0.pinimg.com/236x/ab/e2/1b/abe21b2f3a5be204cb2436d0b9cc6a1d.jpg" />
        </div>
        <div class="card-info">
          Los Andes, Argentina
        </div>
      </div>
    </div>
​
    <div class="card">
      <div class="card-wrapper">
        <div class="card-image">
          <img src="https://s-media-cache-ak0.pinimg.com/236x/7f/20/c5/7f20c589a41bffc8c0b8960fc8001160.jpg" />
        </div>
        <div class="card-info">
          Moon Mountain, Yangshuo, Guangxi, China
        </div>
      </div>
    </div>
​
    <div class="card">
      <div class="card-wrapper">
        <div class="card-image">
          <img src="https://s-media-cache-ak0.pinimg.com/236x/54/a0/e0/54a0e0acf60f33f9b64528bd364ce5d6.jpg" />
        </div>
        <div class="card-info">
          Valley of the Ten Peaks, Moraine Lake, Canada
        </div>
      </div>
    </div>
​
    <div class="card">
      <div class="card-wrapper">
        <div class="card-image">
          <img src="https://s-media-cache-ak0.pinimg.com/236x/d2/d5/aa/d2d5aa40108038f92d4cb0edca78ec26.jpg" />
        </div>
        <div class="card-info">
          Hawaii
        </div>
      </div>
    </div>
​
    <div class="card">
      <div class="card-wrapper">
        <div class="card-image">
          <img src="https://s-media-cache-ak0.pinimg.com/236x/f7/e2/c0/f7e2c018f5ec39a83df831495ed9cad5.jpg" />
        </div>
        <div class="card-info">
          Chichimilá, Yucatan, Mexico
        </div>
      </div>
    </div>
​
    <div class="card">
      <div class="card-wrapper">
        <div class="card-image">
          <img src="https://s-media-cache-ak0.pinimg.com/236x/a7/51/a9/a751a9a163c76ea37eba4747c35d1940.jpg" />
        </div>
        <div class="card-info">
          Basalt Pinnacles, Scotland
        </div>
      </div>
    </div>
​
    <div class="card">
      <div class="card-wrapper">
        <div class="card-image">
          <img src="https://s-media-cache-ak0.pinimg.com/236x/d9/86/6b/d9866b911c08387bc8ab17a6c9897e85.jpg" />
        </div>
        <div class="card-info">
          Somewhere, Iceland
        </div>
      </div>
    </div>
​
  </div>
​
  </div>
  
  <script src="https://cdn.jsdelivr.net/velocity/1.2.3/velocity.min.js"></script>
  <script type="text/javascript" src="http://alves.im/minigrid/minigrid.js"></script>
</body>
</html>
 
(function(){
​
  function grid(isWindowResizing) {
​
    minigrid({
      container: '.cards',
      item: '.card',
      gutter: 6,
      animate: function(el, x, y, index) {
        // set a different delay value for each item to make sure they don't show
        // all in the same time
        var delay = 100 + index * 30;
        var initialDelay = isWindowResizing ? 0 : 500;
        // first lets set the item position without animate it
        Velocity(el, {
          translateX: x + 'px',
          translateY: y + 'px',
          translateZ: 0
        }, {
          duration: 0,
          delay: initialDelay,
          complete: function() {
            // if the window is resizing just set the item position and return
            if (isWindowResizing) {
              return;
            }
            // now we can animate, in this case the opacity and scale
            Velocity(el, {
              opacity: [1, 0],
              scale: [1, 0.9],
            }, {
              duration: 300,
              easing: [0.4,0.2,0.5,1.4],
              delay: delay
            });
          }
        });
      }
    });
  }
​
  window.addEventListener('resize', function(){
    grid(true);
  });
​
  grid();
​
})();
Output

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

Dismiss x
public
Bin info
henriqueapro
0viewers