nblenke/gist:5796232fb6b322e1cafa

## 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>
	<!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>