Paradoxically, delaying elements so that they appear one after another can make a web page feel faster: visitors gain the impression that a site delivers a "smoother" experience by interacting with transitioned elements.
Before creating this effect using both JQuery and CSS3, we should prepare our markup. In the example above, I have a series of photographs by Eric Lesson inside a div:
<div id="fds"><img src="tuwanek-sunshine-coast-bc.jpg" alt="Tuwanek Sunshine Coast"><img src="hornby-island-shoreline.jpg" alt="Hornby Island shoreline"><img src="mt-baker-washington.jpg" alt="Mt Baker, Washington"><img src="nelson-bridge.jpg" alt="Nelson Bridge, Vancouver"><img src="golden-skies-victoria.jpg" alt="Golden skies, Victoria"><img src="first-beach-vancouver.jpg" alt="First beach, Vancouver"></div>The base CSS is very simple:
#fds { font-size: 0; }#fds img { width: 33.33%; opacity: 0; }(Note the use of font-size: 0 to eliminate every last little extra space inside the div).
Creating a presentation sequence with pure CSS3
A sequential fade-in sequence can be created with a keyframe animation and the CSS animation-delay property. You’d typically call on the animation using incrementally greater delay values for each element. (Note that I’ve removed vendor prefixes to keep the code simple).
@keyframes fdsseq { 100% { opacity: 1; } }#fds img { animation: fdsseq .5s forwards; }#fds img:nth-child(1) { animation-delay: .5s; }#fds img:nth-child(2) { animation-delay: 1s; }#fds img:nth-child(3) { animation-delay: 1.5s; }…While this approach works, it has a few disadvantages.
Encountering The Limitations of CSS
The pure CSS approach makes it difficult to change the timing of the animation: altering the delay value for an element at the beginning will force you to rewrite the style declarations for subsequent elements. The CSS3 also does not scale well: the more images you add, the more lines of code you have to write.
There is no incremental delay property for CSS. Nor can we depend on element loading to display elements in sequence: bandwidth, load order prioritization and connection speeds vary far too much to create a reliable experience. Right now, the best method to use if you have more than a few elements to fade in is to implement the presentation with JavaScript (here I’m using JQuery to save on space).
A JQuery Solution
Removing the CSS3 code above, we substitute a script:
$(function() { $('#fds img').each(function(i) { $(this).delay((i++) * 500).fadeTo(1000, 1); })});The code is fairly straightforward: JavaScript indexes each image inside the div, and incrementally sets each to full opacity over one second (1000 milliseconds). The amount of delay before each image appears is determined by its order in the div multiplied by a constant 500 milliseconds: the first image will be delayed by half a second (1 × 500 milliseconds), the next image by a full second (2 × 500 milliseconds), and so on.
Make An Inviting Animation
Either approach will fire off the image transition sequence every time the page is loaded or replaced. For that reason, it is important that you make the presentation complete as quickly as possible, taking no more than a few seconds to fade in all the images. While a slow, graceful introduction may look great to you, it will only serve to annoy and frustrate your visitors.