Ever wondered why there aren’t more web pages with cool special fx on them? Its strange that you never see a website where after clicking on a button, sparks shoot out, the screen un-builds itself, and then re-builds itself to the destination of wherever the link points to.
Well, the answer is simple: misguided view of how different tools can be implemented.
What exactly am I talking about? Here’s a perfect example:
jQuery-UI has the effects library which allows for the use of selectors to perform various transitions and animations, and other libraries like Tween.js allow for even greater customization. Whats stopping somebody from using two separate libraries and combining their functionality? Lets say a part of a page that grows and grows until eventually it pops and breaks into multiple pieces.
While it seems difficult to do, in reality its quite simple if you follow the standard method of coding:
Step 1. How many pieces will the object explode into? and in what shape?
This step will define how you will subdivide the larger picture as a whole before blowing it apart. For simplicity, I’m going to say I want 15 pieces, and for it to explode in a circle.
So, We first generate our pieces which will hide behind the actual object once we create it.
var explosionPieces = [];
var Piece = function(_cx, _cy) {
this.cx = _cx;
this.cy = _cy;
}
for (var i=0; i<15; i++) {
var cx = Math.cos(i * Math.Pi * 4) / 15;
var cy = Nath.sin(i * Math.Pi * 4) / 15;
var newPiece = new Piece(cx, cy);
explosionPieces.push(newPiece);
}
Alright. So, now we have essentially a circle of 15 points which will be the outer perimeter of the explosion (which will stem from the absolute center).
We’re going to now create our object that the user will click on to illicit the explosion. For this I decided to use a giant square-shaped red box.
This can be accomplished in a variety of different ways using Javascript. I’m going to use a DIV object for this particular example. The way that this is done using a DIV is by setting the min-size and min-height CSS properties for a DIV along with the background color, like this:
<div id="RedBox" style="min-height: 200px; min-width: 200px; height: 200px; width: 200px"> </div>
So, now we have our box, lets go ahead and draw the 15 smaller Pieces from earlier and place them in the center of the big box.
function drawExplosionPiece(pieceNumber) {
var redbox = document.getElementById("RedBox");
$('<div id="piece' + pieceNumber + '" class="piece" style="left: 85px; top: 85px; min-height: 30px; min-width: 30px; height: 30px; width: 30px"> </div>').appendTo(redbox);
}
for (var i=0; i<explosionPieces.length; i++) {
drawExplosionPiece(pieceNumber);
}
And then a simple function to move a piece to Point A
function MovePiece(var pieceNumber, var xPoint, yPoint) {
var piece = document.getElementById("piece" + pieceNumber + ");
$("#"+piece).animate({left: xPoint, top: yPoint},20,'linear',
function() { this.fadeOut("fast") } ); }
And finally, the effect from jQuery UI combined with the on click trigger:
$("#RedBox").on("click", function() {
$(this).hide("explode", 100);
for (var i=0; i<16; i++) {
var piece = explosionPieces[i];
MovePiece(i, piece.cx, piece.cy);
}
});
And thats it — all done! You can see this method being put to good use all over my website (http://www.datafault.net/), you can use JS Beautify (search google for it) to de-minify all of the javascript on my page — which is minified to decrease overall network traffic, not to obfuscate.
Anyways, good luck.
– mike