Skip to Main Content

Fade-In: An Effective Transition Effect

Posted on 5.10.2009

Every so often I get the Web design bug and increase my attention on the things that make websites a truly unique experience for Web users. Over time I've found that it's rarely the major shifts in approach that positively influence key performance indicators like time on site or pageviews, but rather small changes which add to or improve the experience of users. One of those areas that I advise Web professionals to look closely at for improvement is in the area of information architecture design.

Delivering informative structure should always be a primary task as more intuitive layouts lead users to more quickly understanding the content. Whatever content is required to present, there is always a more interactive & more responsive way to do so. One technique to do so is through the use of transition effects.

One of my favorite transition effects is the "fade-in." Here'a good one using jQuery which fades an element to 30% on arrival at a website, then when users hover over it, it fades (or reverse fades) to 100%. The effect can be assigned to anything in a website including images, text, even a div tag.

See a demonstration of the effect at

Today's Top Picks for Our Readers:
Recommended by Recommended by NetLine

Leave Your Comment

Login to Comment

Become a Member

Not already a part of our community?
Sign up to participate in the discussion. It's free and quick.

Sign Up


Leave a comment
    Load more comments
    New code