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 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 […]
circularPortfolio

From our weekly sponsor: Design every part of your website with the brand new Divi Theme Builder. Try it for free.

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:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

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

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 47

Comments are closed.
  1. 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

  2. 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!

  3. 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?

  4. 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

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

  6. 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!

  7. 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

  8. 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!

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

  10. 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?

  11. 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!