Skip to content

Instantly share code, notes, and snippets.

@nblenke

nblenke/gist:5796232fb6b322e1cafa

Last active January 4, 2017 16:19
Show Gist options
  • Save nblenke/5796232fb6b322e1cafa to your computer and use it in GitHub Desktop.
Save nblenke/5796232fb6b322e1cafa to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.html
<!doctype html>
<html>
<head>
<title></title>
<style>
.boom {
width:40px;
height:40px;
position:relative;
margin:5%;
border-radius:50%;
background:red;
display:inline-block;
}
.blue {
background:blue;
}
.green {
background:green;
}
</style>
</head>
<body>
<div class="boom"></div>
<div class="boom green"></div>
<div class="boom blue"></div>
<div class="boom"></div>
<div class="boom green"></div>
<div class="boom blue"></div>
<script>
(function () {
'use strict';
var boom = function (args) {
var i = 0,
targets = document.querySelectorAll(args.selector),
poly = {},
randomColor = function () {
var letters = '0123456789ABCDEF'.split(''),
color = '#';
for (i = 0; i < 6; i += 1) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
},
targetClick = function () {
var _this = this,
par = {},
rect = this.getBoundingClientRect(),
player = {},
steps = [],
xvel = 0,
yvel = 0,
spd = args.speed ? args.speed : 200,
parct = args.particleCount ? args.particleCount : 20,
diam = args.diameter ? args.diameter : 10,
hol = document.createElement('div'),
i = 0;
if (args.onStart) {
args.onStart(_this);
}
setTimeout(function () {
if (args.destroy) {
_this.parentNode.removeChild(_this);
} else {
_this.style.visibility = 'hidden';
}
}, 50);
hol.style.position = 'absolute';
hol.style.top = rect.top + 'px';
hol.style.left = rect.left + 'px';
hol.style.width = rect.width + 'px';
hol.style.height = rect.height + 'px';
hol.style.zIndex = 2;
document.body.appendChild(hol);
for (i; i < parct; i += 1) {
par = document.createElement('div');
par.style.width = diam + 'px';
par.style.height = diam + 'px';
par.style.background = randomColor();
par.style.position = 'absolute';
par.style.borderRadius = '50%';
par.dataset.particle = true;
hol.appendChild(par);
switch(Math.floor(Math.random() * 4)) {
case 0:
xvel -= Math.random() * spd;
yvel -= Math.random() * spd;
break;
case 1:
xvel += Math.random() * spd;
yvel -= Math.random() * spd;
break;
case 2:
xvel += Math.random() * spd;
yvel += Math.random() * spd;
break;
case 3:
xvel -= Math.random() * spd;
yvel += Math.random() * spd;
break;
}
steps = [
{transform: 'translate(' + rect.width / 2 + 'px, ' + rect.height / 2 + 'px)'},
{transform: 'translate(' + xvel + 'px, ' + yvel + 'px) scale(.1)'}
];
player = par.animate(steps, {
duration: args.duration ? args.duration : 2000,
fill: 'forwards',
});
}
player.onfinish = function () {
hol.parentNode.removeChild(hol);
if (args.onFinish) {
args.onFinish(_this);
}
};
},
tick = function () {
var par = document.querySelectorAll('[data-particle=true]'),
rect = {},
margin = 0;
if (par.length) {
for (i = 0; i < par.length; i += 1) {
rect = par[i].getBoundingClientRect();
if (rect.top <= 0 ||
rect.left <= 0 ||
rect.bottom >= (document.documentElement.clientHeight) ||
rect.right >= (document.documentElement.clientWidth)) {
par[i].parentNode.removeChild(par[i]);
}
}
}
window.requestAnimationFrame(tick);
};
poly = document.createElement('script');
poly.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://cdn.rawgit.com/web-animations/web-animations-js/2.0.0/web-animations.min.js';
document.body.appendChild(poly);
for (i; i < targets.length; i += 1) {
targets[i].addEventListener('click', targetClick);
}
window.requestAnimationFrame(tick);
};
boom({
selector: '.boom',
duration: 2000,
speed: 200,
particleCount: 30,
diameter: 13,
onStart: function () {
},
onFinish: function (el) {
el.style.visibility = 'visible';
}
});
}());
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment