Explode

Explode.markdown

Explode

Trying out velocity and blast

A Pen by Jimmie Larsson on CodePen.

License.

index.html

<h1>EXPLODE</h1>

script.js

var explode = (function() {
  var blasted,
      h = $(window).height() - 200,
      w = $(window).width() - 200;
  
  var init = function(selector, delimiter) {
    blasted = $(selector).blast({ delimiter: delimiter });
  };
  
  var start = function() {
    for (var i = 0; i < blasted.length; i++) {
      if (blasted[i]) {
        var rnd = getRandomValues();
        $(blasted[i])
        	.velocity({
            translateY: rnd.top / 2,
            translateX: rnd.left / 2,
            scale: 3,
            rotateZ: rnd.rotation + 'deg'
        	}, { duration: 200 })
        	.velocity({
          	translateY: h + 300
        	}, { delay: 2000 + i * 200, duration: 1000 }, 'easeInQuint');
      }
    }
  };
  
  var getRandomValues = function() {
    return {
      top:  Math.floor(Math.random() * (h - -h) + -h),
      left: Math.floor(Math.random() * (w - -w) + -w),
      rotation: Math.floor(Math.random() * (180 - -180) + -180)
    }
  };

  return {
    init: function(selector, delimiter) {
      init(selector, delimiter);
    },
    ignite: function() {
      start();
    }
  }
})();

(function demo() {
	explode.init('h1', 'character');
	setTimeout(function() {
		explode.ignite();
	}, 2000);
})();

style.css

@import url(http://fonts.googleapis.com/css?family=Luckiest+Guy);

body {
  font-family: 'Luckiest Guy', cursive;
  background: #333;
  color: #fff;
  text-align: center;
  overflow: hidden;
}

h1 {
  font-size: 100px;
  text-shadow: #888 0 2px;
  margin-top: 150px;
}

.blast {
  display: inline-block;
}