Using jQuery to fade in your webpage progressively

Okay, so something I want to do, now that I'm able to really focus on expanding my web knowledge, is post some things I learn along the way. Hopefully they'll be helpful to someone.

So, I was trying to find a way to fade in the sections of my website, one after the other. A simple query fade of the background took everything from white to visible, which I didn't like. Fading in body items one by one made the page expand while they were loading - also not a great effect.

This is what I came up with. The page holds the background and will progressively fade in any element you wish, one by one.

Demo Page - See the effect

<script>
$(document).ready(function() {
function fadePage() {
// Target the tag(s) you want to effect with the fade
var fadingTag = "div";
 
var delay = 0;  // Initialize delay - Should start at 0
var delayStagger = 600;  // Delay stagger - Time between elements fading in

// Find out how many elements you need to hide   
var fadingNum = document.getElementsByTagName(fadingTag).length;
    
// Get and fix the overall document height before it disappears (which will happen when elements are hidden)
var pageHeight = $(document).height() + "px";
$("body").css("height", pageHeight);
    
// Hide all targeted tag(s)
$(fadingTag).css("display", "none");
    
// Fade each targeted tag in, one by one
for (var i = 0; i < fadingNum; i++){   
$($(fadingTag).get(i)).delay(delay).fadeIn(delayStagger);   
delay += 350; 
}
}

fadePage();

});
</script> 

All you have to do is add the name of your tag to the "fadingTag" variable. In this demo, I have all divs fading in, one by one. Targeting classes/ids/etc is also VERY EASY with jQuery. Some examples:

// Target divs with class of "test"
var fadingTag = "div.test";

// Target all elements with a class of "test"
var fadingTag = ".test";

// Target all images
var fadingTag = "img";

// Target all images inside a paragraph
var fadingTag = "p img";

jQuery is just endlessly flexible.

If you want to adjust the timing, just change the delayStagger variable.

Did you find this useful? Please add your comments. :)

Now Launching: Kani Web

Well, I took it upon myself this weekend to work like a madwoman and create a new site and brand. I dub thee: KaniWeb!


I mean, what else am I going to do with my weekend? RELAX? Pfft.

This is my first HTML5 site with some CSS3 goodies thrown in. I still have a lot of things I need/want to do with it, but at least the bare bones site is now live -- after 1.5 days' work! I feel like I am getting pretty quick. :)

I chose the name "Kani" after much deliberation. My name is LONG [see: current name of this blog], so it's hard to make a brand of it. My name by itself doesn't really convey a theme to build a site around. So I started taking two letters from my first and last name, seeing what I could get; "Kani" ("crab" in Japanese) seemed like it had potential for some cuteness. So now I have a cute little mascot, woohoo! Also important - I don't see any other web designers with this name. So yay!

Next steps:

• IE7 debugging - looks like 100% crap in this browser. sigh.
• IE6 debugging... maybe? Is it still worth supporting this browser...? I mean, when Microsoft itself makes a "Death to IE6" page... I'll probably just have a script that tells people to get with the program and d/l a new browser
• favicon - the cherry on top
• Possible CSS3 parallax background animation - maybe some moving seaweed at the bottom?
• Install a lightbox for portfolio items
• Do a hard launch of the Facebook page
• Maybe make a KaniWeb linked in profile?
• Do something cool with my boring footer
• Style this blog to match the new site :)
• Get a more descriptive domain
  

Japan: Day One, Part One - A Fourteen-Hour Flight

The night before, I couldn't sleep. Running on pure adrenaline, I was busy making sure everything was packed and ready to go and just so. Our pets had already been boarded, and the apartment felt awfully quiet.

My boss was kind enough to pick us up before the sun rose in order to take us to the Birmingham airport for our 6:35 flight. I remember thinking, "I can just sleep on the plane..."

Total time it took us to get through the security at BHM and to our terminal at 5:30 on a Friday morning? 15 minutes. Pretty cool.

We had a layover in Houston, and while flying over I recognized the area where I used to live, with a little nostalgia. The nostalgia ended inside the airport. IAH sucks completely. Crowded and terrible, TERRIBLE food. Like they want to make everyone as miserable as possible. But here is where we boarded the giant Sky Cow that would fly over the Pacific and to Japan! I had been nervous that I would somehow collapse in a pile of exhaustion from the lack of sleep, but I was still wired with adrenaline.

So, what is a flight from Houston to Narita like? 100% pure hell. Sleep? Not possible. It seemed like the air carried some kind of death fog, and sound just isn't the same inside that cabin. Even with headphones on, everything seems a little distorted and uncomfortable. And seat space? Well obviously the coach sections of airplanes do not have a great reputation for their roominess, but I was wedged in the middle seat with my arms tucked in the whole time. How long were we on this plane? OVER FOURTEEN HOURS. Long enough to be served 3 lackluster meals.

And dehydration? It's a stark reality in that environment. Even though they brought water by quite often, my mouth was continually dry. It's like a desert in the sky. Basically, between the terrible feeling of the cabin, the lack of space, the dehydration and the unpalatable food, the whole affair seems designed to make a person feel like complete crap.

The one consolation is the very small TV screen in the back of each headrest. I got to watch FOUR movies during that flight: Iron-Jawed Angels, CJ7, Recount, and Yatteman. Well, most of Yatteman anyway. The last half hour was EXTREME turbulence. That whole thirty minutes, I really thought I might vomit (but didn't! go me!), and any motion at all (including the movie playing on the screen) heightened my feeling of absolute barfitude. So I had to cut Yatteman short.

After this formative experience in international travel (a first for me), we stepped off the plane and were in JAPAN. I capitalize it because, being on the other side of the world and all, it sometimes sort of feels like this unattainable, golden fantasy place. I was EXCITED. But no one else around me seemed to be skipping down the halls or anything, so I tried to contain it.

The airport was very easy to get around. There are lots of friendly, large, multi-lingual signs to direct people. The security check did not make us feel like dirty criminals - I didn't even get patted down. It only took us 30 minutes to make our way through, taking out cash, exchanging cash, and buying Narita Express passes along the way. We also got the Suica card, which I highly recommend.

The Narita Express is the most lovely, comfortable train ever. It seemed like a frickin mansion compared to the airplane. We could spread out and watch all the cute little houses zoom by outside as we were whisked towards Tokyo. The sun was heavy and large, an orange ball of flame that I just couldn't quite capture on camera. Granted, I had brought a crappy little point-and-shoot camera for convenience, so it had some limitations. Next time we go - DSLR all the way. A cool thing about the Narita Express - all the seats flip around. So once they've arrived at Tokyo Station, attendants come and turn all the seats to face the other direction, and they're ready to head back to the airport!

Let me just pause and say that when you fly in to "Tokyo," you don't really fly in to Tokyo. It's not like Kill Bill. You fly in to Narita, which is 30-45 minutes by train to the NE. It's not dramatic. It's rather quaint, actually. And so you must take a train like the Narita Express to actually get to that most amazing city that is Tokyo.

The N'EX drops you off at Tokyo Station, which has many levels of tracks. If pulling up to Tokyo Station in the N'EX was actually a scene in Final Fantasy, it would be like arriving in Lindblum in FFIX.

So Tokyo Station is basically a monster. It is the busiest station in Japan in terms of trains per day. Walking between tracks can take a longggg time. It's mostly just endless white and gray corridors, sometimes with walking sidewalks, sometimes with interesting ads. Between the entrances to the tracks are clusters of little shops though, so that's cool right? Well, the constant crowded stream of people means that if you stop to gaze at the shops, you are holding shit up. These people are busy. They have places to go. They are moving at breakneck speed. You are IN THE WAY. So I don't think we really felt comfortable taking a leisurely pace to explore. We were caught up in the herd.

Caught in the flow, we made our way to the Hibiya Line subway. International flight? Check. Train ride? Check? Subway ride? Check. These were all firsts for me. And the subways in Tokyo are the COOLEST. I was pretty intimidated by the tangle of subway lines on the map, which looked like a pile of rainbow spaghetti. But they're actually very easy to get used to, once you're there. And they bring you to anywhere in Tokyo unbelievably quickly. We had JR passes and so could ride the JR loop around the city for free, but we often found ourselves taking the subway because it's just SO convenient.

The Hibiya line took us mere blocks from our hotel, less than a minute of walking and we were there. In Part Two, I'll talk about our excellent stay at the Hotel Sardonyx and our first night in Tokyo, which we spent as any self-respecting nerds would do - in Akihabara.

Big Changes Afoot

Well, I've had a big life-change recently: New job, new position. Instead of all-purpose head of an art department, I am now a web developer (YAY!) at a creative agency. I am EXTREMELY excited to be coding and scripting and also playing ping pong during the day.

But that means these will be my last screen-printing design images (unless I get some t-shirt design work while freelancing).

First up, an update of that "King" shirt. Printed in gold metallic ink, it showed me that halftones can actually be quite excellent, when used in small areas for shading.

I think this is the first time I've seen everyone at the office like, wow, cool halftone! instead of sad groans. Also, look at the great detail our screen-printer was able to hold!

Second-up, my last 2 designs from my old job:

It seemed like there were more creative jobs than usual right at the end (as opposed to just "put my logo on X product").

So third: FREELANCE. I have been up to my ears in freelance work. I have a 3-site project for a legal client going on now and other jobs lined up through to November. The wonderful thing is that now my work and my freelance are complementing each other, and I am learning more about web development than ever before. HTML5, CSS3, WAI-ARAI, etc. And I am DYING to work on that placeholder portfolio site I have right now. Weekend project: Joomla 1.6 from-scratch template.

Fourth, and final: I have resumed my Japanese kanji studies with a passion, and I've finally hit the 1000 mark! Soo... only 1000 more until I know most of the common ones...? ^_^;;

On that note, I thought I would kick off a series of travelogues from our trip to Japan... yeah, the ones I promised a couple YEARS ago... sorry about that.