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

Well, I finished uni and achieved a 2:1 in Digital Forensics. I had a good 3 years, but after finishing I decided that I’d rather not work in that field… Although I was good at it (at least, I think I was?!), I just didn’t feel like it was something I wanted to do for the next 2 years, let alone the rest of my life.

Janet and myself moved down to Coventry and in with my parents. Janet got a job quickly, and was working 40 hrs a week to get our ‘move out of my parents house’ fund going.. Me? It wasn’t going so well… I bummed around for a while. I looked for jobs at various companies and even looked into jobs in Digital Forensics just so i’d be earning some money. While I was bumming around my time was interspersed with playing xbox, applying for jobs and brushing up on my PHP and CSS which was the field I really wanted to work in. This kinda stuff had always been a hobby of mine (and as a youngster, a source of money)

After a worrying amount of time, I was still jobless. Then a friend of mine called me. He worked at a company who needed a freelance PHP/CSS developer to go work on some stuff for a week or two. I stayed there for 8 months, before I was offered a full-time job, which I jumped at. So yeah, I’m now a front (and a little bit of a back) end developer at McCann Erickson Birmingham. Been there about 18 months now… And it’s a lot of fun. I’ve had the chance to work with high profile clients such as Harley Davidson, Lotus Cars, Vauxhall and several others.

It’s a job – quite a good one. The people are generally nice, and the atmosphere is pretty good. A lot of the time it doesn’t feel like work, but the rest of the time… It does (surprise!). Gotta take the rough with the smooth I guess. Anyway, after a few months of working there Janet and I moved into our own place. Janet had finished working by now and started to study for an Early Years Professional Status… thing. Basically, if she got it it meant she’d be able to manage nurseries (I think?) , and since she is a big fan of kids this was right up her alley.

What happened next was the single most scary and exciting 9 months of my life (so far?)…. But that’s a whole other post.