Content sliders, faders, and movers have become a mainstay of modern site development.
In fact, manipulating content so that its presentation positively adds to the user experience has become a hallmark of good site design and development.
On the topic of content manipulation, an Ecommerce Developer reader, BOBCAT007, recently asked about the content fader on Mendocino County, California's site in our Community forum. This site features a relatively complex content slider that fades and moves vertically.
In this tutorial series, I am going to demonstrate how to emulate the Mendocino County content fader and slider using the jQuery JavaScript Library, HTML and CSS. While there is a significant level of complexity to this fader/slider—thus the need to break the tutorial into sections—jQuery makes relatively easy work of each transition.
Step No. 1: Defining the Task
I want to start by cataloging the slider/fader's motions, so that I am sure to get just what I want when I start coding.
The Mendocino Country site's slider/fader automatically fades in and out, changing images and content as it goes.
When I first watched the fade, I thought that the images were moving left—like most content sliders—with the fade covering the transition, but after looking at the code, I realized that the images were actually stacked or layered. The fader is changing the opacity for each image as the transition is made. This is, in my opinion, actually a better effect since the images cross-fade. As I build my fader, I will need to be careful how I organize the images.
Next, I need to carefully note the slider/fader navigation, which in this case is four rounded squares, one of which is filled in with a solid color. The filled square represents the currently visible content. And this navigation allows the user to move or "jump" from one image to the next. I will need some means of updating my version of this navigation as my content, which I am going to describe as foils, transitions. Also when the slider moves vertically, this navigation (foil navigation) vanishes.
The content fader/slider also moves vertically, revealing detailed information and links related to the image currently in view. The control for this motion is an information link in the lower right-hand corner of the slider.
When the information link is clicked, the slider, well, slides up.
In addition to the vertical motion, this link also stops the timer that is managing the automatic fading in and out; removes the information link itself and makes the aforementioned foil navigation fade out. It also adds a new section, "Close and Continue."
Finally, clicking "Close and Continue," causes the slider to move down, restarting the automatic fading, and adding back the foil navigation and the information link.
So, in total I need:
- A fader that transitions from one stacked foil to the next;
- Foil navigation that tracks the current foil and allows the user to jump between foils;
- An information link that repositions the foils vertically, revealing additional content, removing other content, and adding new content all at once;
- And a close link that resets all of the foils.
Step No. 2: Adding The HTML Shell
For tutorials, I like to imagine that I am working on a site. So for this example, I am going to be building an imaginary online store called Armando's Alpine Outfitter, a fine purveyor of mountaineering and skiing gear.
For the HTML shell, if you will, I am going to be using a stripped down version of the index.html file from HTML5 Boilerplate, which is a fairly robust website starter kit.
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Armando's Alpine Outfitter</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="style.css">
<script src="modernizr-1.6.min.js"></script>
</head>
<body>
<div id="wrapper">
<header>
<h3><img src="header.png" alt="Armando's Alpine Outfitter" /></h3>
</header>
<div id="content">
</div>
<footer>
</footer>
</div> <!--! end of #container -->
<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="jquery-1.4.2.js"%3E%3C/script%3E'))</script>
</body>
</html>
I also include a bit of CSS to add a background.
body {background: url(backdrop.jpg) no-repeat;}
h3 {text-transform: uppercase;}
Summing Up
In this first installment of the tutorial, I have identified the task and put a basic page "shell" in place. In the next installment, I will organize my foils and prepare to put things in motion.
Related Articles
- Build a Simple Content Slider from Scratch
- Build A Flash-Powered Content Slider from Scratch, Part 1
- Sliding and Gliding Page Content with JavaScript
