Главная » Файлы » Прочие скрипты » jQuery
Yoyo эффект наведения на Jquery и CSS3
23.06.14, 09:26:46

Скачать файл



Интересный плагин на Jquery + CSS 3, сделано как бы 2х мерное пространство, что шарик держится в руке. При наведении на шарик он плавно спускается вниз и немного подпрыгивает в верх, и в конце останавливается.

Для начала посмотрите ДЕМО

Установка:
в любое место где будем выводить скрипт:
Код
<div id="container">  
  <div id="hand-back"></div>  
  <div id="hand-front"></div>  

<div id="string"></div>  
  <div id="yoyo"><a href="http://css-plus.com/">{CSS: +; }</a></div>  
  </div>


теперь подключаем нужные плагины и CSS, после /head :

Код
<link rel="stylesheet" type="text/css" href="css/style.css" />  
  <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2'></script>  
  <script type='text/javascript' src='js/jquery.easing-1.3.pack.js'></script>  
  <script type="text/javascript">  
  $(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");  
});  

  });  
  </script>


Вот и все, готово!
обязательно не забываем в корне сайта создать папки js, css, images. и наполнить содержимым.

Материал подготовил leonP4
Категория: jQuery | Добавил: Apocalypse | Теги: эффект, yoyo, на, JQuery, CSS3, наведения
Просмотров: 487 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: