Create a gist now

Instantly share code, notes, and snippets.

@abernier /README
Last active Nov 16, 2015

What would you like to do?
$.fn.firework
Simple firework plugin — Play with options!
/* Decorative */
html, body {height:100%;}
html {display:table; width:100%;}
body {display:table-cell; vertical-align:middle; text-align:center; overflow:hidden;}
div {display:inline-block; width:5em; height:4em; border:1px dotted; position:relative; border-radius:.25em;}
pre code {display:inline-block; text-align:left;}
pre code .options {
background-color:rgba(0,0,0,.05);
}
pre button {font-size:xx-small; position:relative; z-index:99;}
/* Plugin specific */
.firework.star {font-weight:bold; color:gold;}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>$.fn.firework</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div></div>
<pre><code>$('div').<a href="jquery.firework.js">firework</a>(<span title="Edit me!" class="options" contenteditable>{
amount: 30,
boundary: 10,
<a href="http://en.wikipedia.org/wiki/List_of_Unicode_characters#Dingbats">content</a>: ['✿', '❀', '✰', '❄', '❤', '&lt;marquee&gt;coool&lt;/marquee&gt;'],
duration: 2000,
durationVariation: 10,
<a href="http://jqueryui.com/demos/effect/easing.html">easing</a>: 'easeInOutQuad'
}</span>);<button type="button">Fire!</button></code></pre>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://rawgithub.com/jquery/jquery-ui/1-8-stable/ui/jquery.effects.core.js"></script>
<script src="jquery.firework.js"></script>
<script src="index.js"></script>
</body>
</html>
(function () {
function fire() {
var options;
try {
options = eval('(' + ($('code .options').text() || null) + ')');
} catch(e) {
throw e;
}
$('div').firework(options);
}
$('button').click(function (e) {
e.preventDefault();
fire();
});
fire();
}());
(function ($) {
//
// $.fn.firework
//
// Firework plugin
//
// Author: Antoine BERNIER (abernier)
//
var settings;
function firework(el, options) {
var $stars = $();
//
// Generate stars markup (within a container)
//
$(el)
.css('position', function (index, value) {
return value === 'static' ? 'relative' : false;
})
.append($('<span/>').css({
position: 'absolute',
left: 0,
top: 0,
right: 0,
bottom:0
})
.append(function () {
var i = options.amount;
while (i--) {
$stars = $stars.add(($('<span/>', {
"class": options.klass,
html: ($.isArray(options.content) ? options.content[random(0, options.content.length - 1)] : options.content)
}).css({
position: 'absolute',
left: '50%',
top: '50%'
})));
}
return $stars;
})
)
;
// Once stars into the DOM, use their width/height to apply the negative margin offset
$stars.each(function (i, el) {
$(el).css('margin-left', function (index, value) {
return -($(this).width() / 2);
}).css('margin-top', function (index, value) {
return -($(this).height() / 2);
});
});
//
// Animate stars
//
(function () {
var animations = [];
$stars.each(function (i, el) {
animations.push($(el).animate({
left: minusOrPlus() + '=' + options.boundary * random(0, 50) + '%',
top: minusOrPlus() + '=' + options.boundary * random(0, 50) + '%',
fontSize: random(100, 100 * options.boundary) + '%',
opacity: 0
}, random(~~(options.duration / options.durationVariation), options.duration), options.easing));
});
$.when.apply(this, animations).done(function () {
$stars.parent().remove();
});
}());
//
// Helpers
//
function random(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function minusOrPlus() {
return Math.random() > .5 ? '+' : '-';
}
}
// Default settings
settings = {
amount: 50,
boundary: 1.5,
content: '',
klass: 'firework star',
duration: 3000,
durationVariation: 3,
easing: 'swing'
};
$.fn.firework = function (options) {
return this.each(function (i, el) {
firework(el, $.extend({}, settings, options));
});
};
}(jQuery));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment