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

In the previous article, I discussed the basics of an image fade and how it could be used to display a series of images while conserving space, using the examples of a keyless entry remotes site, as the fade can display images for highly aesthetic products or those that are more technically functional.  In this article, we move into some of the technical aspects of adding an image fade to a website.  This article will not focus on the code itself, but rather some of the options you have and issues to look out for.

The basic code is simple enough.  You have a timer running at a rapid rate (generally about 10 miliseconds), that reduces the opacity of the target image or div while it is positive.  Once it hits zero, it changes the image source (for a basic, all-Javascript fade) or alters the inner HTML of the div (for an AJAX-based fade).  It then raises the opacity back up to 100%, and delays the timer for a few seconds until the process repeats.  So a viewer will see a keyless remote (for example) on screen for a few seconds, which grows rapidly more transparent until it vanishes entirely, and then a new remote will fade in, display for a few seconds, and fade out, and so on.

What’s the difference between the straight Javascript and the AJAX versions?  Well, with Javascript, you need to collect all the information from your database before-hand.  Using AJAX lets you gather the information with each image that you swap out, and generally gives more control if you want to do more complex things with the images.  On the flip side, you will generally need the image to stay faded out for somewhat longer with AJAX, to account for  processing time.

One thing you don’t want is for your old keyless entry remote to start fading back in, and then suddenly switch to the new one.  To prevent this, your best move is to preload your images, and make sure your AJAX completing is what triggers the fade in.

Another thing to remember is that opacity is one of those things that the various browsers just don’t feel like agreeing on.  Make sure you set the opacity changing appropriately for all the browsers, or you’ll get remotes just switching out with no fade.  While this still accomplishes the general goal, it lacks all the aesthetic appeal of the fade.

Now that we have a baseline for the fade, we can move on to some advanced options.  In the next article, I will discuss a few variations on the image fade, including how to run multiple fades at once and an “expanding” fade that relies on changing the image size rather than its opacity.

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

When you want to be able to display a large number of images in a small amount of space, one of your best tactics is some Javascript code that lets you keep some of the images off-screen, and cycle through them. Even when aesthetics isn’t the main draw for the site’s product – as with keyless entry remotes, for example – pictures can help break up text walls and make the site itself more appealing. Having various keyless remotes or other items moving in and out adds color and animation, catching visitors’ attention and giving them a hint of a website’s variety. There are several ways to code moving images; in this series of articles, we’ll be discussing the image fade.

So what is an image fade, and how does it compare to, say, an image crawl or scroll? An image fade brings up a selection of pictures, displaying them one at a time, each for a few seconds, and then fades out, switches images, and fades back in to display a new picture. So you might have a keyless entry remote display, then fade out and have a remote for a different make or model fade in, and a few seconds later replace it with a third, and so on.

Two of the biggest advantages of image fades over crawls and scrolls (where you have a train of images that either moves automatically across the screen in a loop or is moved back and forth by the user) is that you don’t need to have all of the images on the page at once. Rather than waiting for all the images to load for the page to be fully loaded (delaying any onload scripts you might be using, and possibly delaying the loading of other content), you can have only a single keyless remote loaded up, and use an onload preloader to start loading the rest once the page has fully loaded. Additionally, you don’t need a lot of vertical or horizontal space for the entire train, giving you more flexibility in positioning and allowing you to use larger images. This can also mean extra room for additional information; you might list the name, price, and maybe a short description beneath each keyless entry remote, for example. A crawl or scroll with that capability would take up quite a lot of space, making it unfeasible unless the crawl is meant as the focal point of the page.

A fade involves the display of only one image at a time, which is something of a disadvantage, as visitors can’t, for example, scroll through a large selection at once. As such, image fades are much less useful than crawls and scrolls as a navigational tool. It’s also worth noting that image fades are somewhat more complex than crawls and scrolls, as they work best with the additional of AJAX coding (although you can create a functional one using only standard Javascript).

So, with the key points of image fades noted, the next article will focus on some of the things you will need to consider when integrating the fade into a website. The final article in this set will go over some of the options you have for expanding your image fades.

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