tobypitman.com

Pure CSS Sliding Image Gallery

So, another random CSS3 experiment! This time it’s an image gallery that has a slide effect.

This was a bit tricky to work out but I got there in the end. The idea is to get one image to slide in while the current image slides out. There’s a lot of z-index going on as well so the new image always appears to be at the top.

I’m not totally sure how I got the z-index to work or why it does! One thing I’m sure of is you have to use CSS Animations, not Transitions! There are two main @keyframe set ups for this webkit animation.

One to animate the :target image in

/* Animation for the :target image. Slides the image in. */

@-webkit-keyframes moveTarget {
    0% {
        left:-700px;       
    }
   
    100% {
        left:0px;
    }
}


ul#slider li:target {
    -webkit-animation-name: moveTarget;
    -webkit-animation-duration: .5s;
    -webkit-animation-iteration-count: 1;
    top:0px;
    left: 0px;
    z-index: 10;
}

And one to move the current :target image out

/*
Animation for the current image. Slides it out and back to the starting position.
Adds a lower z-index than the now current image.
*/

@-webkit-keyframes moveIt {
    0% {
        left:0px;  
    }
    50% {
        left:700px;
    }
    100% {
        left:-700px;
        z-index: 5;
    }
}

ul#slider li:not(:target) {
    -webkit-animation-name: moveIt;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-iteration-count: 1;
    top:0px;
    left: 0px;
}

The first animation has one step over 0.5 secs. The second has three over 1.5secs. I’m sure you get the picture. The time it takes for the for the image to move in is the time it take for the other image to move out (50%) before it get’s returned to the start position ready to come in again. The image moving out is given a lower z-index so it isn’t seen moving behind the current image to the start position.

Here’s a picture!

Plays nice in Firefox and Opera too just without the animation. I’ve not looked at it in IE as I’m on a Mac and just can’t be arsed to deal with it as this is just a bit of fun. It doesn’t support :target so it won’t work anyway. Maybe in IE9?

Yes it looks like Galleria, needed some quick images. Maybe this could prove to be a leaner alternative in the future for image galleries and featured content sliders. I’ve no doubt this could be intergated into Wordpress very easily or some kind of dynamic PHP gallery (from a folder of images) script.

Anyway, you can have a look at the demo and decide for yourself. :)

Demo

Posted on Monday, May 3rd, 2010 at 7:36 pm.

Filed under CSS, Web Design.

10 Responses to “Pure CSS Sliding Image Gallery”

  1. Andrew Mok says:

    this is a good write up and works well on FF and Chrome. Sadly, IE is also at large and this doesn’t work on IE as in I can’t even change the images.

  2. Cat says:

    Sometimes the transition goes crazy and it just overlaps the old image. So the older image doesn’t slide out. Or the images bounce to the left and just overlap again.
    I’m using safari. It works perfectly from the first image to any other image though!

  3. William Li says:

    Thanks for this! Works great. Only problem is that everytime you click on a thumbnail it jumps to the top of #box.

    Do you have a fix or workaround for this? as I really want to implement this on my site

  4. CJS says:

    I am having the same issue with the image box re positioning my page in the browser window (it jumps up to the top) when the first thumbnail is clicked on??? Help please, how can I fix this???

  5. porry says:

    Simple clean code, i love it.

    Same here with the “jump to top of he page” thingy.

    thx.

  6. usuck@sucky.com says:

    Nice code asshole. It doesn’t work in Firefox or IE. Whats the point?

    • Toby says:

      Thanks for your thoughtful and insightful comment? I’m sure if you’d actually read it instead of just looking at the pictures and getting ready to copy and paste the code you’d have noticed that it says things like ‘webkit animation’ and..

      “Plays nice in Firefox and Opera too just without the animation. I’ve not looked at it in IE as I’m on a Mac and just can’t be arsed to deal with it as this is just a bit of fun.”

      Some people eh!

  7. Dominic says:

    I i can’t seem to be able to re-size the this… Any help? Oh and thanks allot this is the best thing i have found yet.

  8. diddy luvva says:

    Hi Toby,

    Agree with usuck dude but would never put it like that.

    I would suggest you buy a real computer instead of a nice looking Mac. The majority of the world work on PC’s and IE is one of the main browsers for the web.

    Might be best to head web pages up with “failed coding, need help” or “failed coding, can you do better?”

    I congratulate you on trying. It is a great idea but might be best considering the rest of the computing world live in a PC world and the Mac is just a wee toy that lacks in compatibility.

    Thanks again Toby for the interesting attempt.

    • Toby says:

      I’m not sure that this has anything to do with ‘Mac vs PC’ as Safari and Chrome both run on PC.

      When I wrote this in 2010 ‘Webkit’ was the only ‘platform’ that supported experimental CSS3 animations. These have since been added to Firefox 5. So maybe you could take the ‘Failed Code’ and try to fix it for Firefox too. Put it up online so we can all have a look.

      Like I said this was an experiment to see if it could be done with the emerging CSS3 technology at the time. I wasn’t asking anybody to implement it.

      P.S. I already have a ‘real’ computer and yes it looks nice too!