Fade-In: An Effective Transition Effect

Posted on

  • email
  • twitter
  • facebook
  • share this

share this

advertisement

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.

 

Custom WordPress Design Themes at 99designs.com. Get the most designs for your buck when you start a design project!


Login To Comment

forget your login information?

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

advertisement

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

Facebook


Twitter