Интересный плагин на Jquery + CSS 3, сделано как бы 2х мерное пространство, что шарик держится в руке. При наведении на шарик он плавно спускается вниз и немного подпрыгивает в верх, и в конце останавливается.
Установка:
в любое место где будем выводить скрипт:
Code
<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 :
Code
<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. и наполнить содержимым.
Главная
Форум
Регистрация
Контакты
Онлайн игры
Статистика
Всё для компа
Вход
Автор: 
