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.
Bear Wear Photos 2
Here are some more photos from the shoots for Bear Wear.
So I was excited when they told me I was the only one who didn't have to be clean shaven and could keep my beard. I was slightly less excited though when I realized though that they would have me be the poster child
for the Alumni gear.
Can't pass up a good chance to do some back flips on camera.
There are many things that were extremely awkward about this photo session. First they decided to dress me
like I was sick or something and wearing all sweats when everyone else is in shorts and tanks. Second they proceeded to have the two white guys try to playfully steal the ball from the one non-white guy in the middle...
Fun fact when getting a picture taken of you eating popcorn there is no time to chew / swallow. Needless to
say awkwardness ensues when your mouth is packed so full of popcorn, no more can be fed to you and your mouth is so full you can't explain what is wrong...
Note all of the perfectly shaven legs then my hairy man legs just chilling in the middle... slightly out of place.
Bear Wear Photos
I was selected for a modeling position for "Bear Wear", UCLA's clothing catalog. Here are some of the photos from the shoots. The catalog that most of the photos were for will come out late this summer (2011).
These track jackets were awesome, I really wanted to steal the one I was wearing.
Again.
Laying on the grass with a guy on a ladder taking pictures of us... incredibly awkward. Especially when he suggested we kiss for a shot.
Camera Man: "You just got out of a game, you know you're a little drunk or something and need to lean on each other to walk!"
We're like one of those greaser gangs that always walks in a flying V and sometimes snaps on beat.
We take our job very seriously.
The fake burger was very entertaining.
Unfortunately these images are very large and take a long time to upload one by one. The rest will have to come later.
Java Script Helicopter Game
For work this summer I was assigned to become an "expert in JavaScript". Along the way I found myself playing around with it and re-made an old favorite, the helicopter game. This is a very janky version of course and was made early on in my understanding of JavaScript, however it is still fun and somewhat addicting. Check it out below.
The cool thing about this game is that it is almost exactly the same functionality of the old game, except all of the visuals are built purely in HTML. It is one big table with a bunch of rows and columns that are blacked out to represent walls and then the plane and skull are just special ASCII character codes written in the cell. This means this game is extremely lightweight and portable, you can run in on just about anything that can browse the internet and it will work without any Flash plugins or other fancy footwork.
With modern cell phones browsing the Internet there has been a large turn towards lightweight web based applications and games. Why code an App individually for each different phone hardware, tablet architecture, and computer operating system when you could code it once in HTML and JavaScript and have it work everywhere! Especially now with the HTML5 Canvas the possibilities are nearly limitless.
I found this article on a Pseudo 3D Game Engine written purely in JavaScript. This thing is so lightweight it only takes a couple of pages of code for this whole demo. Given it looks like a poor rip off of Wolfenstein... but then again throwbacks are all the rage these days. You can see the quasi-finished product here.
Download:
JavaScript Helicopter Game Source Code