JSFiddle - React, Tailwind, and code Playground
by ozzon91
HTML
<script src="http://jetpack.me/wp-content/mu-plugins/annual-reports/js/canvas.js?1"></script>
<div id="fireworks"><div>
JavaScript
$('#fireworks').fireworks({
preload : ["img/bg-city.png"],
bgFillColor : false,
bgImage : "img/2012-bg-landscape.png",
spriteColors : {
rocket : [faint],
explosion : [yellow, white],
core : [orange, yellow, blue, white, moss],
shell : [green, red, orange, tan, green, white, white, white, sky, blue],
ring : [red, orange, white, sky, tan],
logo : [blue, green, orange, sky]
},
spotlightColors : [
"#020D1F",
"#020D1F",
"#020D1F"
],
debug : false,
delayTimeline : 5000,
baseHref : "/wp-content/mu-plugins/annual-reports/",
timeline : [["January 1",[0,0,17]],["January 20",[5,0,2]],["February 10",[13,0,0]],["February 24",[0,18,0]],["March 10",[10,0,14]],["March 18",[0,14,0]],["May 5",[0,0,30]],["June 2",[0,0,17]],["August 18",[0,16,0]],["October 13",[0,30,25]],["November 16",[0,0,24]],["November 24",[0,2,5]],["December 1",[17,0,0]],["December 8",[0,0,14]],["December 16",[5,2,0]]],
// Keep the page black until the fireworks are ready to start
startCallback : function() {
var fireworks = this;
// Fade in the setting and start the show with a bang
$("#curtain").fadeOut(500);
setTimeout( function() { fireworks.explodeShell({x:0, y:-20, z:0}, 15, {x:false, y:false}); }, 700 );
setTimeout( function() { fireworks.explodeShell({x:-100, y:-40, z:0}, 20, {x:false, y:false}); }, 800 );
setTimeout( function() { fireworks.explodeShell({x:100, y:-80, z:0}, 30, {x:false, y:false}); }, 930 );
setTimeout( function() { fireworks.explodeRaster("logo", {x:0, y:-130, z:0}, 70); }, 1500 );
// Let it play for a bit and then fade in the intro text
setTimeout( function() {
//always start at the beginning
$(window).scrollTop(0);
$("#intro").fadeIn(1500, function() {
setTimeout(function() {
$("#fixedButtons").fadeIn(1500);
$("#body").fadeIn(1500, function() {
$(window)
.trigger( 'drawMap' )
.on( 'resize',...