Java Script Fade In / Fade Out Effect
I was recently coding up a webpage for a friend and I found myself writing multiple different fairly complicated pieces of code to do a fairly simple fade effect. A fade in or out transition between pages or between message banners can really add a nice effect to a webpage. It is surprisingly complicated though to get it working in the way you want setting the delays before each chance of alpha level and also handling the different css properties necessary to be compatible with all browsers.
Here I have unified the code for this under an API in one file that can be included and allow for a dynamic and easy to use interface that works with any HTML DOM element. The code is attached and included below.
var Xt = {
FadeIn: function (element, time, checkVis, callbackFunction) {
if (!time) {
time = 2000;
}
if (!callbackFunction) {
callbackFunction = function () {};
}
var inc = 10000/time;
if (checkVis && element.style.opacity)
alpha = parseInt(element.style.opacity)*100;
else
alpha = 0;
function iterator () {
if (alpha >= 100) {
element.style.opacity = 1.0;
element.style.filter = 'alpha(opacity = 100)';
callbackFunction();
return;
}
else {
element.style.opacity = alpha/100;
element.style.filter = 'alpha(opacity = ' + alpha + ')';
setTimeout(iterator, 100);
}
alpha += inc;
};
iterator();
},
FadeOut: function (element, time, checkVis, callbackFunction) {
if (!time) {
time = 2000;
}
if (!callbackFunction) {
callbackFunction = function () {};
}
var inc = 10000/time;
var alpha;
if (checkVis && element.style.opacity)
alpha = parseInt(element.style.opacity)*100;
else
alpha = 100;
function iterator () {
if (alpha <= 0) {
element.style.opacity = 0.0;
element.style.filter = 'alpha(opacity = 0)';
callbackFunction();
return;
}
else {
element.style.opacity = alpha/100;
element.style.filter = 'alpha(opacity = ' + alpha + ')';
setTimeout(iterator, 100);
}
alpha -= inc;
};
iterator();
}
};
|
Below is the documentation on the two functions.
Xt.FadeIn(DOM Element, [Length of Effect], [Start from Current Opacity Level], [Callback Function]) Xt.FadeOut(DOM Element, [Length of Effect], [Start from Current Opacity Level], [Callback Function]) The fade functions provide a fade in effect for any HTML element on a web page by adjusting the css style's opacity property. This function can be applied to any DOM element such as an image or a div containing the entire page. The function can be used by including this file then merely referencing the Xt.FadeIn or Xt.FadeOut functions. Parameters: DOM Element - Any HTML DOM element which can be passed from JavaScript code using the document.getElementById function or the this object in onclick or onmouseover events. Length of Effect (Optional) - The duration of time the fade effect should last for, measured in milliseconds. Start from Current Opacity Level (Optional) - A boolean value which if set to true will start the effect from the current opacity level of the object rather than automatically setting the initial opacity. Callback Function (Optional) - A function that will be called upon the effect terminating. Function has no return value. |
Download the source code here: Xt Java Script Fade Extension
Team Fortress 2 | Hightower | 17-0
I've been playing this game Team Fortress 2 a lot lately since they made it free for anyone to download. I have to say it is amazing. The game is so intricate with different little "taunt" animations for every weapon and tons of different items you can find or craft and use in game for everyone to see. Now they even have a replay feature where you can download the video of your game after the fact and edit it in game to your liking. Here is one I got of me going 17 and 0 for the win the other day on Hightower.
My setup is the Soldier with the Blackbox to heal by blasting people and the rocket boots so I can do rocket jumps all over the place without taking too much damage.