Create a Yoyo with jQuery and CSS3

Haven’t you ever just wanted a yoyo on your webpage? A beautiful, animated, spinning yoyo that slides down like a real yoyo would? I know I have never even thought of it and I probably would never have the need for it either, however it is very useful to learn (If you don’t already know) how one would go about creating a yoyo so you could use the techniques for other things. View the demo in Safari/Chrome and take full advantage of the CSS3.

Where to start?

The first thing we need to do is create the images. So open up your vector drawing software (Or Photoshop, I prefer vector programs when I need to draw things) and draw a hand that is holding a yoyo. I used a photo and traced the hand. I inserted the ‘yoyo’ afterwards. The completed image is broken down into multiple images in order to give the viewer the impression that there is some form of depth to it and the jQuery along with the CSS3 will animate it later. In my example the yoyo goes between layer 1 and layer 2 of the hand.
Once that is completed, save the different layers as separate images.
These are the images I came up with:


CSS-Plus Yoyo

The HTML

There is very little HTML markup, so it is pretty easy to understand.
Each <div> tag is going to contain a separate background-image and eventually the divs will be absolutely positioned. This means we will need to include a container that will ultimately be relatively positioned. We are also going to include a string <div> (I’ve never seen a functional yoyo without a string before).

<div id="container">
    <div id="hand-back"></div>
    <div id="hand-front"></div>
    <div id="string"></div>
    <div id="yoyo"><a href="#">{CSS: +; }</a></div>
</div>

The CSS

#container {
	height: 550px;
	width: 331px;
	position: relative;
}
#hand-front {
	background: url(../images/hand-front.png) no-repeat left top;
	height: 169px;
	width: 331px;
	position: absolute;
	left: 0;
	top: 20px;
	z-index: 400;
}
#hand-back {
	background: url(../images/hand-back.png) no-repeat left top;
	height: 99px;
	width: 190px;
	position: absolute;
	left: 128px;
	top: 43px;
	z-index: 100;
}
#string { 
	background: #79694c;
	border: 1px solid #3b2f1d;
	height: 20px;
	width: 2px
	 position: absolute;
	top: 47px;
	left: 243px;
	z-index: 200;
}

#yoyo {
	background: url(../images/yoyo.png) no-repeat center center; 
	height: 150px; 
	width: 150px; 
	position: absolute; 
	left: 169px; 
	top: 47px; 
	z-index: 300; 
}
#yoyo a {
	color: white;
	display: block;
	font-size: 20px;
	font-weight: bold;
	line-height: 150px;
	margin-left: 27px;
}
#yoyo a:hover { 
	text-decoration: none; 
	text-shadow: 0 0 15px #000; 
}
.rotate {
	-webkit-animation-duration:1.1s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-name: yoyo;
	-webkit-animation-timing-function:linear;
}
@-webkit-keyframes yoyo { 
	from {-webkit-transform:scale(1) rotate(0deg);}
	to {-webkit-transform:scale(1) rotate(360deg);} 
}

Most of this CSS is just giving the background, height, position, width and z-index to the corresponding ID which creates our desired image out of the multiple images we have and the ‘#yoyo a’ is just styling and positioning the {CSS: +; } link.
The interesting part is the .rotate class. This is the awesome CSS3 that is causing the yoyo to spin in Webkit based browsers (Chrome and Safari). Unfortunately there is no pure CSS way to get an object to spin like this in other browsers.

The jQuery

I’ve used the jQuery easing plugin to give the yoyo a more visually appealing animation effect.

$(document).ready(function() {	

	$("#container").hover(function(){
		$("#yoyo").addClass("rotate");
		$("#string").stop().animate({height: '400px'}, {duration:1000, easing: 'easeOutBack'});
		$("#yoyo").stop().animate({top: '400px'}, {duration:1000, easing: 'easeOutBack'});
			}, function() {
		$("#yoyo").removeClass("rotate");
		$("#string").stop().animate({height: '20px'}, {duration:600, easing: 'easeInOutExpo'} );
		$("#yoyo").stop().animate({top: "47px"}, {duration:600, easing: 'easeInOutExpo'} );
	}); 

	$("#yoyo a").hover(function(){
		$("#yoyo").toggleClass("rotate");
	});   

});

Explanation:
Line 1 – When the DOM is ready
Line 3 – When you hover on the #container
Line 4 – Add the class of .rotate to #yoyo
Line 5 – Animate the current height to 400px within the duration of 1000 milliseconds (1 second) and use easing ‘easeOutBack’
Line 6 – Animate the current ‘top’ property to 400px within the duration of 1000 milliseconds and use easing ‘easeOutBack’
Line 7 – When the object is not being hovered
Line 8 – Remove the class of .rotate from #yoyo
Line 9 – Animate the current ‘height’ property to 20px within the duration of 1000 milliseconds and use easing ‘easeInOutExpo’
Line 10 – Animate the current ‘top’ property to 47px within the duration of 1000 milliseconds and use easing ‘easeInOutExpo’
Line 13 – When you hover over #yoyo a
Line 14 – Toggle the class .rotate

There we go. A digital yoyo! I have got a few ideas on how this technique could be used practically which I will talk about and explore in a future article.

What say you?

  1. Thanks! That was very informative, I just bookmarked your website url.

    1. Jamy Golden says:

      I’m glad you found it useful.

  2. mudança says:

    your article help me a lot for my job.

  3. Great Post. I would love to read more in future. keep up the good work.

  4. Nic says:

    Cool

  5. Kymberly Loiko says:

    Great articles & Nice a site….

  6. SaMath says:

    Perfect.Thanks!

  7. Nice Work Jamy, I like creative works like this ‘Simple But Creative’. I am a Web Designer/Developer in Zanzibar &amp I promise I will use it some where in my Web Design Projects!

  8. Hamed says:

    Great Post ,I enjoyed it…

    in jQuery Explanation,in line of 9 and 10,duration should be 600 milliseconds,not 1000

    Thank alot…

  9. Andy B says:

    Hey thanks a lot for the great article your article helped me create something similar and learn some J. query along the way keep up the great work

    1. Jamy Golden says:

      Great, I’m glad you’ve managed to take something away from it!