Автор: 
В сегодняшнем уроке мы создадим потрясающий эффект с помощью jQuery.
Мы будем использовать плагин jQuery.path для анимирования кругового движения меню. Лучше взгляните на демо для просмотра примера.
Идея заключается в показе круглой зоны с контентом с главным меню. При наведении на один из элементов меню, красиво появляется всплывающее подменю.
ДДавайте начнем...
Разметка
HTML состоит из оболочки, которая содержит изображения для зоны с контентом и элемента для большого круга контента. Главное меню находится внутри большого контентного круга. Далее мы определяем структуру для 3-х маленьких кругов, которые будут появляться при наведении на элементы главного меню.
Code
<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>
<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>
В двух маленьких кругах будет список ссылок. В третьем - изображения.
CSS
Мы позиционируем большинство элементов абсолютно, так как тогда нам будет намного проще применить плагин jQuery.path. Давайте начнем со стилей первых элементов.
Code
.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;
}
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;
}
Для главного меню мы будем использовать CSS спрайты.
Code
.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;
}
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;
}
Круг должен быть позиционирован правильно для использования плагина. Поэтому нам необходимо "притянуть" его на место используя отрицательный отступ размером с половину ширины и высоты.
Code
.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);
}
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);
}
Стили для описаний внутри маленьких кругов будут такими:
Code
.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;
}
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 и box-shadow - свойства CSS3 и не будет правильно работать в браузерах IE.
И теперь магия...
JavaScript
Для того, чтобы использовать плагин нам необходимо определить центр и
радиус воображаемого круга, который мы будем использовать для вращения
маленького круга. В нашем примере воображаемый круг - "circleBig”.
Следующая формула дает нам координаты центра:
Code
center x = Абсолютное лево circleBig + радиус circleBig
Code
center y = Абсолютный верх of circleBig + радиус circleBig
Code
radius r = Ширина circleBig / 2
Code
$(function() {
/* При загрузке страницы анимировать секцию - about по умолчанию */
//move($('#about'),2000,2);
$('#menu > a').mouseover(
function(){
var $this = $(this);
move($this,800,1);
}
);
/*
функция для анимации / показа 1-го круга.
speed - время для показа одного круга
turns - кол-во поворотов вокргу большего круга
*/
function move($elem,speed,turns){
var id = $elem.attr('id');
var $circle = $('#circle_'+id);
if($circle.css('opacity')==1)
return;
/* изменить изображение */
$('#image_'+id).stop(true,true)
.fadeIn(650)
.siblings()
.not(this)
. f adeOu t(650 );
/*
если уже есть круг, тогда давайте его уберем:
*/
$('#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);
});
/* сделать так чтобы круг появлялся круговыми движениями */
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);
}
});
/* При загрузке страницы анимировать секцию - about по умолчанию */
//move($('#about'),2000,2);
$('#menu > a').mouseover(
function(){
var $this = $(this);
move($this,800,1);
}
);
/*
функция для анимации / показа 1-го круга.
speed - время для показа одного круга
turns - кол-во поворотов вокргу большего круга
*/
function move($elem,speed,turns){
var id = $elem.attr('id');
var $circle = $('#circle_'+id);
if($circle.css('opacity')==1)
return;
/* изменить изображение */
$('#image_'+id).stop(true,true)
.fadeIn(650)
.siblings()
.not(this)
. f adeOu t(650 );
/*
если уже есть круг, тогда давайте его уберем:
*/
$('#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);
});
/* сделать так чтобы круг появлялся круговыми движениями */
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);
}
});
Вот и все готово! Вышло круто!
