On pages that contain a large masthead or “hero” image, often seen on e-commerce sites, many different products and/or departments are vying for that top spot. Often, the compromise is to simply have a series of images fade in and out, repeating on a loop. This is all well and good but can often be frustrating to use, because far too many sites overlook the need to pause the rotation in order to glean the very information that is attempting to be conveyed.
The implications of a constant animation should be considered. Most users have learned to ignore annoying ads that contain a lot of motion. The designer/developer must take into account those users who might not want to see the animation, while also trying to read the rest of the page. Worse yet is when a user attempts to read one of the rotating slides, only to have it continue to animate. Therefore, play/pause functionality is be included in this recipe, lest our users be caught in an endless, animated loop.
.fadeOut() methods, we can create a nice cross-fade animation that will
iterate through an array, changing each image’s opacity based on a set
timer. By implementing what we learned from the tabbed document
portion of this chapter, we can create links to each image, which not
only will cause the target image to come to the forefront but also
sets a flagged variable of
pause to either true or false, which will start or stop the animation. This makes ...