Max Kiesler - Web Design, SOMA San Franciso

Designing With AJAX:  CSS and AJAX Web page Transition

 Subscribe

Wednesday, August 17, 2005

I've always loved the page transitions in flash but, being a devotee of tableless CSS, I've never used them in my own, or my client's sites. In steps AJAX. There are many ways to fade object in AJAX, but how do you apply that to your web page? Here is a simple technique that anyone can use.

To illustrate the concept, click on any link on my site and go to the next page. The idea is a simple ul li hover class on the link going to the next page, which uses a simple AJAX fade technique. The key is to use the same color for the rollover and the incoming page fade.

The combination makes for a smooth webpage transition, and gives a clear indication to the reader that the link connects to the content. This could be a very valuable navigational tool, whether used as a page-to-page link or as an internal link.

Enjoy!

Comments on this post

eric  on  09/26  at  10:21 PM

Thanks for the info.

Harry Maugans  on  05/28  at  08:17 PM

Ugh, page fades are THE most annoying thing on the internet.

NetGuy  on  09/05  at  04:50 AM

No… sites that play cheesy midi music are worse than page fades.