So, just before Christmas I was tasked with sprucing up a site for a corporate party. The site was designed around the idea of a party that had gotten.. slightly out of hand. It featured a drunk looking dude on a chandelier at the top of the page, so to add a little extra fun I decided to animate him swinging from left to right – and make it look like he was having a pretty sweet time.
This post will walk you through how to make an element swing using CSS3 and a little javascript – just like in this example.
I started by modifying the image so that the edge of the top of the ‘swing’ was in the center of the image, and the swing started at a 45 degree angle – like so..
Fear my photoshop skills.
So, after we’ve done this, we need to set up our markup! It’s not exactly complicated…. infact, all you need is the div that you want to swing.
1 | <div class="swing"></div> |
Next up, we need to set up our CSS, as below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | .swing { height: 200px; width: 200px; background: url('swing.png'); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); -ms-transform:rotate(0deg); } .right { -moz-transform:rotate(-90deg); -webkit-transform:rotate(-90deg); -o-transform:rotate(-90deg); -ms-transform:rotate(-90deg); } |
Sure, this looks like a lot of CSS for something relatively basic.. but since the CSS3 specification has not been ratified, we need to target the four main rendering engines specifically (Hence all the prefixs – moz, webkit, o and ms.
So – what does this CSS do? In the case of the below examples, I have replaced the relevant rendering engine prefix with an X.
1 | X-transform:rotate(0deg); |
This sets the rotation of our image to 0 degress – which is how it initially appears on the page.
1 | X-transform:rotate(90deg); |
This sets the rotation of our image to.. you guessed it.. 90 degrees – the second state we need for our swinging motion.
1 | X-transition: all 1s ease-in-out; |
This tells our browser(s) to set an animation that lasts 1 second and has easing in and out, on our specified element.
Then all we have to do switch between our 2 classes every second. this is easily achievable with jQuery, using the following code:
1 2 3 4 5 6 7 8 9 10 | $(document).ready(function() { function swing(){ $('.swing').toggleClass('right'); setTimeout(swing, 1000); } swing(); }); |
This piece of code creates a function called ‘swing‘ – which basically toggles the class of ‘right‘ on our element. As soon as it’s toggled, it sets a timeout to call the function again in a second. We call the swing function as soon as the page has loaded, and the process of toggling every second starts. Rinse. Repeat. Win!
And that’s it!
You can have a look at it in action here. Exciting stuff, huh?
Thoughts? Comments? Criticisms? Leave a comment below, or contact me on Twitter – @smyther
