Instantly share code, notes, and snippets.

@abernier /README
Last active Nov 16, 2015

Embed
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));
@abernier

This comment has been minimized.

Show comment
Hide comment
Owner

abernier commented Jul 18, 2012

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment