Image Fades III

The previous two articles focused on some of the technical and tactical aspects of adding image fades to a website – specifically, a keyless entry remote website.  Of course, creativity and versatility are two of the greatest strengths of custom web designers, and there are generally a number of ways to create any given function.  In this article, I will explore some of the other options for the image fade.

The basic image fade that I’ve been talking about basically displays a single keyless remote at a time.  Every few seconds, the remote fades out, using a transparency effect to gradually disappear rather than simply jumping to a new remote.  Once the image is gone, a new keyless remote is loaded in, and the image fades back into view.  This is a simple and aesthetically appealing effect, but there are some other options.

For example, you might set up multiple fades.  Your best move in this case is to keep them running off the same functions and timers, rather than trying to call the functions multiple times.  Otherwise, the functions have to run in order, generally a hundred times a second or so.  The additional processing time can result in lagging, which is particularly annoying for this type of code, since you want to make sure that the image only changes when it has entirely vanished.

So say you are setting up a pair of fades, one for factory remotes and one for aftermarket remotes.  One thing you might want to consider is whether to have them fade in and out at the same time, or in an alternating fashion.  If they alternate, do you want one to be showing when the other is not, or would you rather have one fade fully out and in, then the next, then the first, and so on?  Each system has its advantages; having them fade together lends more synchronicity to the site, for example, but also creates moments where the images are all gone, leading to a lot of blank space with multiple fades.

Another option is to not have the remotes “fade” specifically, but rather, to grow to normal size and then shrink down to nothingness.  This tactic often casts the illusion that the image is getting “closer” rather than “larger”, which can be good for adding more impact to the animation.  A good idea here is to make sure the image is centered in the div, and alter its vertical positioning equal to its modified height.  This will keep the image centered, preserving the approach illusion, rather than making it seem to be expanding from the upper-left corner.

And that’s about it.  Our keyless remote site has several options to choose from for adding a bit of animation with its images.  One final move might be to draw the images directly from the product database, and linking them to the product page.  That way, if a certain image attracts someone’s eye, they can go right to it.  Of course, this strategy works better for sites where the product’s main selling point is its appearance, rather than a keyless entry remote site!

Dustin Schwerman is the head web designer for Truly Unique Website Design. Truly Unique works on websites of all varieties, such as www.cruisingforremotes.com, where you can find keyless entry and keyless remotes.

Article Source: http://bb-articles.com

Tagged with: Entry • Fade • image • Keyless • Remote • web

Filed under: Web Design & Development

Like this post? Subscribe to my RSS feed and get loads more!