Article Views:
41
Ezine ready page
Ezine ready page
Posted on June 19, 2009 by Dustin Schwerman | Posted under Web Design
Image Fades III
|
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! About The Author: 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 remote keyless entry and car keyless entry. |
Tags: WEB, IMAGE, FADE, KEYLESS, ENTRY, REMOTE
