Designing With AJAX: CSS and AJAX Web page Transition

17/08/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.

Comments are closed.