Fade-In: An Effective Transition Effect

Posted on

  • email
  • twitter
  • facebook
  • share this

share this

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 hv-designs.co.uk.

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

Be the first to comment on this article

999 E Touhy Ave
Des Plaines, IL 60018

Toll Free: 1.800.817.1518
International: 1.773.628.2779
Fax: 1.773.272.0920
Email: info@websitemagazine.com