Responsive CSS3 Blinds Effect Slideshow (background-image)
A CSS3 slideshow with blinds effect (similar to the one in WOW Slider), powered by a few lines of JavaScript. Stacked media queries serve smaller images to mobile.
Please note that this version uses divs with background-images set with media queries. Here is a demo using <img> tags.
Works in modern browsers and IE9+ (no blinds effect in IE9). IE8 users will just see the first image.
Please view the source of this page for HTML markup, CSS and JS.
How it Works
Each slide is made up of 3 container elements, showing the first, middle, and last third of the image side-by-side so that it appears to be a single image. The containers animate in, in turn, and at the same time, the background-position of each image moves across slightly to create the overall blinds effect.
Retina-ready Images
This slideshow demo uses a retina image technique based on the "Retina Revolution" blog findings of Daan Jobsis - low quality, twice-size images, scaled down to less than half-size so that pixel density doubles, which bizarrely produces crispy sharp images despite smaller filesize.
As Daan puts it;
"The bottomline is that heavy compression doesn't affect the final image as much as you would expect. This is because of the greater amount of pixels in the Retina image, compression artefacts are scaled down and therefore almost unnoticeable."
So, on a desktop, the heavily compressed images in this slideshow will display at a maximum size of 1024 x 500 pixels. Their dimensions are actually twice the size at 2048 x 1000 pixels, yet their total filesize is only ~350kb, while still being retina-ready.
Compare that to correctly sized images (1024 x 500 pixels displayed at 1024 x 500 pixels) compressed using more typical methods ('Save For Web' optimisation in Photoshop, at 60% quality), where the total filesize is more like ~500kb, and the images are NOT retina-ready.
Related
More demos and snippets
Did you find this useful? There are more demos and code snippets this way.