For those interested in what the scripts doing (since the screenshot isn’t doing it justice), it creates a set of circles of various sizes and animates them falling from the top of the screen to the bottom, where they fade out.
Pretty neat.
Want to try it out for yourself? See the script below
window.TipsAndTricks = {
// Creates a fun animation of colourful circles floating down the screen for a limited period of time
celebration: function(){
var colors = ["#ff5f5f", "#34c981", "dodgerBlue", "pink", "purple"];
var numberOfShapes = 50;
var generateShapeSize = function(){
var smallestSize = 50;
var biggestSize = 200;
return Math.floor((Math.random() * (biggestSize - smallestSize + 1)) + biggestSize);
}
var generateFallSpeed = function(){
var fastestSpeed = 1500; //MS
var slowestSpeed = 3500; //MS
return Math.floor((Math.random() * (slowestSpeed - fastestSpeed + 1)) + fastestSpeed);
}
var getLeft= function(){
return Math.floor(Math.random() * $("#application").width());
}
var getTop = function(){
return Math.floor(Math.random() * 100) * -1;
}
var createShape = function(size, color){
var shape = document.createElement("div");
$(shape).addClass("partyTime--circle");
$(shape).css({
width: size,
height:size,
"background-color": color,
zIndex: 99999999,
position:"fixed",
opacity: 0.8,
left: getLeft(),
top:getTop(),
"border-radius": 180,
});
$("#application").append(shape);
$(shape).animate({ top: $("#application").height() - size}, generateFallSpeed(), "linear", function(){
$(this).animate({opacity: 0}, 100, "linear", function(){
$(this).remove();
});
});
}
var colorCounter = 0;
for(var i = 0; i < numberOfShapes; i++){
createShape(generateShapeSize(), colors[colorCounter++]);
if( colorCounter > colors.length){ colorCounter = 0; }
}
}
}