CSS3 transitions and animations are rightly attracting a lot of attention. With support in most modern browsers, there is a lot of scope for creating rich user experiences using only CSS. In this post, I will walk through how to create a stack of photos using CSS keyframe animations and a dash of jQuery to achieve a pretty awesome effect.
This is basically another take on moving backgrounds using jQuery, but I was inspired to create a rotating globe by Román Cortés Pure CSS Coke Can. Sure, this has nothing to do with displacement, and it uses JavaScript, but it was fun none-the-less!
I’m very much looking forward to the World Cup this year, which reminded me of the fun I had during the last one four years ago. I remember organising a Question of Sport style quiz for my fellow colleagues, which gave me a great chance to try out some JavaScript that I had learned. One round involved the creation of a picture board, which is divided up into squares, and users can click on the numbers to reveal a portion of an image underneath, similar to the Picture board on Question of Sport, but more like a game of Catchphrase. It got me thinking: what would I do now I am armoured with all this jQuery goodness?
I apologise in advance, a this is a very old technique, but it’s something I have wanted to try out since last year. A while ago, I stumbled upon Sunrise Design, and absolutely loved the subtle background animation!