Stunning Circular Motion Effect with jQuery

Today we are going to create a stunning circular motion effect with jQuery. We will be using the jQuery.path plugin to animate a circular movement for a menu in a […]

From our sponsor: Try Mailchimp today.

Today we are going to create a stunning circular motion effect with jQuery. We will be using the jQuery.path plugin to animate a circular movement for a menu in a portfolio example.

The idea is to have a rounded content area with a main menu. When hovering over one of the menu items, a sub-menu element appears, circulating around the content area.

Let’s get started!

The Markup

The HTML consists of a wrapper that contains the images for the content area and an element for the big content circle. The main menu is inside of the big content circle. Then we define the structure for the three small circles that will appear when hovering over the menu items:

<div class="wrapper">
	<div id="images" class="images">
		<img id="image_about" src="images/1.png" alt="1" style="display:block;"/>
		<img id="image_portfolio" src="images/2.png" alt="2"/>
		<img id="image_contact" src="images/3.png" alt="3"/>
	</div>
	<div class="circleBig">
		<div id="menu" class="menu">
			<a id="about" class="about" href="">About me</a>
			<a id="portfolio" class="portfolio" href="">Portfolio</a>
			<a id="contact" class="contact" href="">Contact</a>
		</div>
	</div>
</div>
<div id="circle_about" class="circle">
	<div class="description">
		<ul>
			<li><a href="#">Who I am</a></li>
			<li><a href="#">What I do</a></li>
			<li><a href="#">My CV</a></li>
		</ul>
	</div>
</div>
<div id="circle_portfolio" class="circle">
	<div class="description">
		<div class="thumbs">
			<a href="#"><img src="thumbs/1.jpg" alt=""/></a>
			<a href="#"><img src="thumbs/2.jpg" alt=""/></a>
			...
		</div>
	</div>
</div>
<div id="circle_contact" class="circle">
	<div class="description">
		<ul>
			<li><a href="#">Email</a></li>
			<li><a href="#">Twitter</a></li>
			<li><a href="#">Facebook</a></li>
		</ul>
	</div>
</div>

In two of the three smaller circles we will have a link list. The other circle contains some images.

The CSS

We will position most of the elements absolutely since that will make things a lot easier applying the jQuery.path plugin. Let’s start with the style of the first elements:

.wrapper{
    font-family: Verdana;
    font-size:11px;
    width:600px;
    height:600px;
    position:relative;
    top:150px;
    left:200px;
}
.images img{
    display:none;
    position:absolute;
    left:6px;
    top:6px;
}
.circleBig{
    position:absolute;
    top:0px;
    left:0px;
    width:418px;
    height:418px;
    background:transparent url(../images/circlebg.png) no-repeat top left;
}

For the main menu we will be using CSS sprites:

.menu{
    position:absolute;
    width:101px;
    height:74px;
    top:240px;
    left:260px;
    z-index:999;
}
a.about, a.portfolio, a.contact{
    float:left;
    clear:both;
    height:23px;
    margin-bottom:10px;
    width:105px;
    text-indent:-2000000px;
    opacity:0.8;
    background:transparent url(../images/menu.png) no-repeat top left;
}
a.portfolio{
    width:90px;
    background-position:-105px 0px;
}
a.contact{
    width:88px;
    background-position:-199px 0px;
}
a.about:hover, a.portfolio:hover, a.contact:hover{
    opacity:1.0;
}

The circle needs to be positioned correctly for the usage of the jQuery.path plugin. So we need to “pull” it into place by adding a negative margin of half of the width, or height, respectively.

.circle{
    margin-top:-88px;
    margin-left:-88px;
    width:176px;
    height:176px;
    position:absolute;
    left:0;
    top:0;
    background:transparent url(../images/circle.png) no-repeat top left;
    z-index:10;
    opacity:0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}

The style for the descriptions inside of the small circle will be as follows:

.description{
    width:120px;
    margin:40px auto;
    text-align:center;
}
.description ul{
    list-style:none;
    text-align:center;
}
.description ul a{
    line-height:30px;
    font-weight:bold;
    color:#fff;
    text-decoration:none;
    text-transform:uppercase;
    font-size:11px;
    text-shadow:1px 1px 1px #aaa;
}
.description ul a:hover{
    color:#f0f0f0;
}
.thumbs a img{
    border:3px solid #f9f9f9;
    -moz-box-shadow:1px 1px 2px #999;
    -webkit-box-shadow:1px 1px 2px #999;
    box-shadow:1px 1px 2px #999;
}

Text-shadow and box-shadow are CSS3 properties that will not work in any IE browser.

OK, let’s add the magic.

The JavaScript

In order to use the jQuery.path plugin we need to define the center and radius of the imaginary circle that will be used for the rotation of the small circle. In our case the imaginary circle is the bigger circle, the “circleBig” class image. The following formula gives us the center coordinates:
center x = Absolute left of circleBig + radius of circleBig
center y = Absolute top of circleBig + radius of circleBig
radius r = Width circleBig / 2

$(function() {

	/* when page loads animate the about section by default */
	//move($('#about'),2000,2);

	$('#menu > a').mouseover(
		function(){
			var $this = $(this);
			move($this,800,1);
		}
	);

	/*
	function to animate / show one circle.
	speed is the time it takes to show the circle
	turns is the turns the circle gives around the big circle
	 */
	function move($elem,speed,turns){
		var id = $elem.attr('id');
		var $circle = $('#circle_'+id);

		/* if hover the same one nothing happens */
		if($circle.css('opacity')==1)
			return;

		/* change the image */
		$('#image_'+id).stop(true,true)
					   .fadeIn(650)
					   .siblings()
					   .not(this)
					   .fadeOut(650);

		/*
		if there's a circle already, then let's remove it:
		either animate it in a circular movement or just fading
		out, depending on the current position of it
		 */
		$('#content .circle').each(function(i){
			var $theCircle = $(this);
			if($theCircle.css('opacity')==1)
				$theCircle.stop()
			.animate({
				path : new $.path.arc({
					center	: [409,359],
					radius	: 257,
					start	: 65,
					end     : -110,
					dir	: -1
				}),
				opacity: '0'
			},1500);
			else
				$theCircle.stop()
			.animate({opacity: '0'},200);
		});

		/* make the circle appear in a circular movement */
		var end = 65 - 360 * (turns-1);
		$circle.stop()
		.animate({
			path : new $.path.arc({
				center	: [409,359],
				radius	: 257,
				start	: 180,
				end		: end,
				dir		: -1
			}),
			opacity: '1'
		},speed);
	}
});

And that’s it! Enjoy!

Message from TestkingGet professional 642-832 online training to learn jQuery and other web applications. Download the 640-822 tutorials and 640-816 study guide to learn all about jquery plugins.

Tagged with:

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 47

Comments are closed.
  1. This looks awesome! You are really doing an excellent job with your tutorials.

  2. Thank you all for your great feedback, I am really glad you like it! Cheers, ML

  3. This looks great, but one thing to keep in mind is touchscreen devices that have no hover event. You might also want to show the animation if the link is clicked as well!

  4. weijejejjejejejeje
    its a rock…any circle can rolling…aw aw aw
    thanks for tutorial
    gaya!!!

  5. Creative!
    I like how jQuery (javascript) is getting a lot more like flash these days.

  6. Great tut, who needs flash anyway when you can do stuff like this.

    Keep on the good work !

  7. I am trying to use it but there is one problem. After the circles comes in on hover they just stop. They don’t fade out. Can you tell me what’s the problem. I have tried changing the jquery but it doesn’t goes out correct.
    And one more problem is that I have to refresh the tab to make it work again. It doesn’t work again if i hover the mouse once.

    • @jdsans What exactly did you change when you adapted it? If you would have it online somewhere I could check what the problem is. Cheers, ML

  8. JDSANS, probably you haven’t wrapped all your code into the “content” div id. Here’s what I mean:

    …[your html code]…

    Hope I’ve solved your problem :)!

    See ya!

  9. hi – great work. i wanted to show the menu when clicked and added the following:

    $(‘#menu > a’).click(
    function(){
    move($(‘#about’),2000,2);
    var $this = $(this);
    move($this,800,1);
    }

    But this doesn’t work and a click just shows the standard homepage. Any idea how to add a click handler to mimic the hover effect?

  10. great effect, i could use something like this. Does anyone know how to make the circles a different jpg file for each menu item. So they have different image backgrounds. any help appreciated

  11. How can i change the name of the menu from About Me,Portfolio,Contact to Products,About Us,Contact…….thanks for the help… 😀 😀

  12. Hi, thank you so much for this beautiful effect.

    Can please someone create a page.html, so that after clicking a menu, we can also have/write some content in it.

    Sory I am not a professionel, therefore if you you help me, i would appreciate it. thanks!

  13. Hii,I’m new to jquery.I used it in asp.net website but its not working.Can you send the wole code to my mail-id….i will be glad to you….n you rock everytime

  14. Hello – I adore this effect! I need a little help though.

    Is it possible to center everything? I’ve tried centering the content div and everything works except the moving circles. They stay in place, sort of in the middle, as if they were fixed.

    I saw in the tutorial that you positioned them the way you did to make it easier – am I just better off that way? Or can I center everything?

    Thank you!

  15. @JP yep i cant change menu item names too. Strange… Anyone can help about it? But still it’s perfect!

  16. Hello there, your work is awesome
    I was trying to implement this tut on a project
    I was wondering how can i make the active menu item stay active
    Any suggestions?

  17. Hi, Im trying to move the small box to a different position. Im using firebug to temporarily move the circle but as soon as i hover over the link again the small circle goes back to the original position. any help? Thanks!

  18. Amazing Work as usual Mary Lou, I was just wondering: Any chance to fade out the circle or stop the animation on mouseout? So we only have the circle visible on mousein?

    Thanks

  19. Love this! Is there a way to handle the center of the circle movement through percentages of the stage instead of pixels?

    instead of center : [409,359], have center:[50%,359],

  20. Hi, that’s such a killer script !!
    I’m trying to adapt it in a different way, actually, I’d like to use the script on several round images on the same page, like one submenu per image. But I’m a total noob on coding… any quick help would be much appreciated !
    Thanks again for all your works !
    Greetings from Paris, France !