creating a 3 image slider with css

December 18, 2011

programming website development as3 css css3 flash javascript jquery

David Jones
@david3jones

I’ve been dabbling with css animations and transitions with the goal of trying to convert an old flash file I created almost 3 or 4 years ago into a animated css example. It wasn’t quite as easy as I had anticipated and unfortunately only appears to work in Firefox 4 as this browser has support for animations on psuedo elements but its a nice little example and starting point for me. Original Intentions The best way to explain the effect I was intending to recreate is to show you the original flash file. Which you can see as the last example on the demo page here. I have swapped the images out with a few of my own as I’m sure the original client wouldn’t be happy with me using her images here. Each image when mousing over it will expand and contract the other regions to reveal more or less of the images in a fluid motion. Stick to what you know I’m a programmer at heart and much prefer working with something I can dig my teeth into like a programming language rather than a few animation options on a style sheet. So I decided i’d first create a jquery version of my slider as it would be a nice alternative if needed and a good way to get into the right mindset for me to work. The second example on the demo page shows the results of this jquery animation. I built this code straight into a jquery plugin, it is still basic and is setup to work with just 3 images however it a good base to expand on if needed. The code essentially uses the jquery animate function to resize and position links with the background images. This turned out quite well and was fairly fluid for me. There is no easing like my flash version but that can be added with the jquery easing plugin if needed but I was quite satisfied with it. You can get the jquery plugin here or rip it from the demo page it also needs the following css and html setup to function

<div id="slider">
    	<img src="img/4.jpg" alt="" />
    	<img src="img/5.jpg" alt="" />
    	<img src="img/6.jpg" alt="" />
</div>

#slider {
    	overflow:hidden;
    	width:493px;
    	height:308px;
    	position:relative;
}

$(document).ready(function(){
    	$('#slider').imageReveal();
});

The css animation Now on to the css. To make this work I decided to layer on top of each other the 3 images absolutely as again background images on links and then set their z-index. This created the starting position of the 3 images as I wanted. The animation was the hardest part of this for me ashovering over an image but targeting the adjacent images to also move I found very tricky. This is easy when you hover over the first image as the other 2 images are adjacent to this but when you say hover over the last image you cannot select previous adjacent siblings. I couldn’t think of a particularly good solution to this so my work around was I used the pseudo selector ::after to insert the middle image again and animate this too. Again this doesn’t come with ease as animating created elements in css only works in firefox 4 and above. So the final result works in firefox but is still quite buggy at best. Infact the css version without animation works better but obviously doesn’t have the nice fluidity of the other examples. Here is the code for the css animated version

#cssslider {
    	width:493px;
    	height:308px;
    	position:relative;
}
    
#cssslider a {
    	position:absolute;
    	display:block;
    	width:164px;
    	height:308px;
}
    
#cssslider a:nth-child(1) {
    	left:0px;
    	z-index:0;
}
    
#cssslider a:nth-child(2) {
    	left:164px;
    	z-index:1;
}
    
#cssslider a:nth-child(3) {
    	left:328px;
    	z-index:2;
}
    
/* First mouseover */
#cssslider a:nth-child(1):hover {
    	z-index:3;
    	animation: myfirst 1s;
    	-moz-animation: myfirst 1s; /* Firefox */
    	-webkit-animation: myfirst 1s; /* Safari and Chrome */
    	-webkit-animation-fill-mode: forwards;
    	-moz-animation-fill-mode: forwards;
}
    
#cssslider a:nth-child(1):hover ~ a:nth-child(2) {
    	z-index:4;
    	animation: myfirst2 1s;
    	-moz-animation: myfirst2 1s; /* Firefox */
    	-webkit-animation: myfirst2 1s; /* Safari and Chrome */
    	-webkit-animation-fill-mode: forwards;
    	-moz-animation-fill-mode: forwards;
}
    
/* second mouseover */
#cssslider a:nth-child(2):hover {
    	z-index:3;
    	animation: mysecond 1s;
    	-moz-animation: mysecond 1s; /* Firefox */
    	-webkit-animation: mysecond 1s; /* Safari and Chrome */
    	-webkit-animation-fill-mode: forwards;
    	-moz-animation-fill-mode: forwards;
}
    
/* third mouseover */
#cssslider a:nth-child(3):hover {
    	z-index:3;
    	animation: mythird 1s;
    	-moz-animation: mythird 1s; /* Firefox */
    	-webkit-animation: mythird 1s; /* Safari and Chrome */
    	-webkit-animation-fill-mode: forwards;
    	-moz-animation-fill-mode: forwards;
}
    
#cssslider a:nth-child(3):after {
    	position:absolute;
    	top:0px;
    	left:-164px;
    	bottom:0px;
    	right:0px;
    	border:0px solid red;
    	content:" ";
    	z-index:9999;
    	background:url(img/5.jpg);
    	width:164px;
    	display:none;
}
    
#cssslider a:nth-child(3):hover:after {
    	display:block;
    	animation: mythird2 1s;
    	-moz-animation: mythird2 1s; /* Firefox */
    	-webkit-animation: mythird2 1s; /* Safari and Chrome */
    	-webkit-animation-fill-mode: forwards;
    	-moz-animation-fill-mode: forwards;
}
    
/* Animations */
@keyframes myfirst
{
    	from { width:164px; }
    	to { width:328px; }
}
    
@-moz-keyframes myfirst /* Firefox */
{
    	from { width:164px; }
    	to { width:328px; }
}
    
@-webkit-keyframes myfirst /* Safari and Chrome */
{
    	from { width:164px; }
    	to { width:328px; }
}
    
@keyframes myfirst2
{
    	from { width:164px; left:164px; }
    	to { width:82px; left:328px; }
}
    
@-moz-keyframes myfirst2 /* Firefox */
{
    	from { width:164px; left:164px; }
    	to { width:82px; left:328px; }
}
    
@-webkit-keyframes myfirst2 /* Safari and Chrome */
{
    	from { width:164px; left:164px; }
    	to { width:82px; left:328px; }
}
    
@keyframes mysecond
{
    	from { width:164px; left:164px;}
    	to { width:328px; left:82px; }
}
    
@-moz-keyframes mysecond /* Firefox */
{
    	from { width:164px; left:164px;}
    	to { width:328px; left:82px; }
}
    
@-webkit-keyframes mysecond /* Safari and Chrome */
{
    	from { width:164px; left:164px;}
    	to { width:328px; left:82px; }
}
    
@keyframes mythird
{
    	from { width:164px; left:328px;}
    	to { width:328px; left:164px; }
}
    
@-moz-keyframes mythird /* Firefox */
{
    	from { width:164px; left:328px;}
    	to { width:328px; left:164px; }
}
    
@-webkit-keyframes mythird /* Safari and Chrome */
{
    	from { width:164px; left:328px;}
    	to { width:328px; left:164px; }
}
    
@keyframes mythird2
{
    	from { width:164px; left:-164px;}
    	to { width:82px; left:-82px; }
}
    
@-moz-keyframes mythird2 /* Firefox */
{
    	from { width:164px; left:-164px;}
    	to { width:82px; left:-82px; }
}
    
@-webkit-keyframes mythird2 /* Safari and Chrome */
{
    	from { width:164px; left:-164px;}
    	to { width:82px; left:-82px; }
}

and the html

<div id="cssslider">
    	<a href="#" style="background:url(img/4.jpg);"></a>
    	<a href="#" style="background:url(img/5.jpg);"></a>
    	<a href="#" style="background:url(img/6.jpg);"></a>
</div>

creating a 3 image slider with css

Related

Comments