Pack(ev)ery thing

In this example below you will see how to do a Pack(ev)ery thing with some HTML / CSS and Javascript

Playing around with Packery by @ desandro

Thumbnail
This awesome code was written by , you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ⁣ ©
  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Pack(ev)ery thing</title>
  
  
  
  
  
</head>

<body>

  
<div class="view">
  <div class="pack"> </div>
</div>
  <script src='http://npmcdn.com/packery@2.1/dist/packery.pkgd.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/pixelass/packevery-thing-wWxPqg */
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

// Because we want to have fun !!!
// let's pack(ev)ery thing

var PACK = 'pack';
var ERY = 'ery';
var pack = document.querySelector('.' + PACK);
var ery = 'itemSelector';
var PackEry = {
  Pack: pack,
  Ery: _defineProperty({}, ery, '.' + ERY)
};
var Pack = PackEry.Pack,
    Ery = PackEry.Ery;

var packery = new Packery(Pack, Ery);

// fun is over!
// confused?
// let's do some work instead...

var Item = function Item() {
  var text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
  var className = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'move';

  var type = text === '' ? 'div' : 'a';
  var item = document.createElement(type);

  if (type === 'a') {
    item.setAttribute('href', 'https://packery.metafizzy.co');
    item.setAttribute('target', '_blank');
  }

  item.innerHTML = '\n    <div class="cube-wrapper ' + className + '">\n      <div class="axis">\n        <div class="cube">\n          <div class="side"></div>\n          <div class="side"></div>\n          <div class="side"><span class="text">' + text + '</span></div>\n          <div class="side"></div>\n          <div class="side"></div>\n          <div class="side"></div>\n        </div>\n      </div>\n    </div>\n  ';
  item.className = ERY;
  return item;
};
var maxItems = 143;
var delay = 1000 / 16;
var counter = 0;
var addItems = function addItems() {
  var label1 = 'metafizzy'.split('');
  var offset1 = label1.length + 1;
  var label2 = 'packery'.split('');
  var offset2 = maxItems - 2 - label2.length;
  var className = void 0;
  var text = void 0;
  if (counter >= 1 && counter < offset1) {
    text = label1[counter - 1];
    className = 'stay';
  }
  if (counter >= offset2 && counter < maxItems - 2) {
    text = label2[counter - offset2];
    className = 'stay';
  }
  var item = Item(text, className);
  pack.appendChild(item);
  packery.appended(item);
  packery.layout();
  if (++counter < maxItems) {
    setTimeout(function () {
      requestAnimationFrame(addItems);
    }, delay);
  } else {
    cancelAnimationFrame(addItems);
  }
};

addItems();

Comments