Форма входа

mvcreative

Старая форма входа

  • Страница 1 из 1
  • 1
Модератор форума: BSide  
Форум MVCreative » сделаем креативный uCoz » Общение и архив » Архив старых тем » Потрясающий эффект с помощью jQuery
Потрясающий эффект с помощью jQuery
cechДата: Вторник, 08.06.2010, 19:51 | Сообщение # 1
Генерал печатного дела
Группа: Администраторы
Пользователь №: 1
Сообщений: 1706
Награды: 59
Репутация: 108
Статус: оффлайн



В сегодняшнем уроке мы создадим потрясающий эффект с помощью 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>



В двух маленьких кругах будет список ссылок. В третьем - изображения.


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;
}



Для главного меню мы будем использовать 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;
}



Круг должен быть позиционирован правильно для использования плагина. Поэтому нам необходимо "притянуть" его на место используя отрицательный отступ размером с половину ширины и высоты.


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);
}



Стили для описаний внутри маленьких кругов будут такими:


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;
}



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);
           }
});



Вот и все готово! Вышло круто!



 
вверх
ELYSIUMДата: Среда, 16.06.2010, 01:51 | Сообщение # 2
Говорун
Группа: Пользователи
Пользователь №: 16
Сообщений: 55
Награды: 0
Репутация: 2
Статус: оффлайн
Круто!спс за урок!
А нету урока как сделать красивый слайдер???



Реклама запрещена!
 
вверх
cechДата: Среда, 16.06.2010, 07:55 | Сообщение # 3
Генерал печатного дела
Группа: Администраторы
Пользователь №: 1
Сообщений: 1706
Награды: 59
Репутация: 108
Статус: оффлайн
Пока нет, но будет smile


 
вверх
saynovДата: Воскресенье, 04.07.2010, 21:10 | Сообщение # 4
Болтун
Группа: Пользователи
Пользователь №: 77
Сообщений: 75
Награды: 0
Репутация: 0
Статус: оффлайн
блин...супер!спасибо всем кто делает такие СОВЕРШЕННЫЕ шаблоны и ПРЕКРАСНЫЕ уроки!!!! happy
 
вверх
Angry4178Дата: Суббота, 10.07.2010, 00:54 | Сообщение # 5
Спикер
Группа: Пользователи
Пользователь №: 85
Сообщений: 255
Награды: 5
Репутация: 14
Статус: оффлайн
cech, а есть ли возможность сделать 3-ий круг кружков.Ну например Мы наводим на "About me" появляется кружок, а в нем слово "Who I am" и при наведении на "Who I am" появляется еще один кружок с конечной информацией.Возможно ли такое реализовать?


 
вверх
nDiviDДата: Суббота, 10.07.2010, 08:09 | Сообщение # 6
Чего так орать?
Группа: Проверенные
Пользователь №: 21
Сообщений: 614
Награды: 11
Репутация: 39
Статус: оффлайн
Блин, забыл с какого сайта вы уроки берете, переустановил браузер и все закладки удалил =(
А эффект отличный =)

Добавлено (10.07.2010, 08:09)
---------------------------------------------
А вспомнил!


Web-create пати uNiceGroup =) Порно бесплатно!
 
вверх
Angry4178Дата: Суббота, 10.07.2010, 17:00 | Сообщение # 7
Спикер
Группа: Пользователи
Пользователь №: 85
Сообщений: 255
Награды: 5
Репутация: 14
Статус: оффлайн
nDiviD, делись ссылкой)


 
вверх
cechДата: Суббота, 10.07.2010, 19:06 | Сообщение # 8
Генерал печатного дела
Группа: Администраторы
Пользователь №: 1
Сообщений: 1706
Награды: 59
Репутация: 108
Статус: оффлайн
Здесь не доска объявлений и рекламы! Флудить не надо! только по теме!


 
вверх
Angry4178Дата: Суббота, 10.07.2010, 20:03 | Сообщение # 9
Спикер
Группа: Пользователи
Пользователь №: 85
Сообщений: 255
Награды: 5
Репутация: 14
Статус: оффлайн
cech, оК!
cech, а мой вопрос решаем?))
Quote (Zloi)
cech, а есть ли возможность сделать 3-ий круг кружков.Ну например Мы наводим на "About me" появляется кружок, а в нем слово "Who I am" и при наведении на "Who I am" появляется еще один кружок с конечной информацией.Возможно ли такое реализовать?



 
вверх
Форум MVCreative » сделаем креативный uCoz » Общение и архив » Архив старых тем » Потрясающий эффект с помощью jQuery
  • Страница 1 из 1
  • 1
Поиск: