All-For-Kompa.RU

Сегодня:
Карта сайта форум Главная
Скрыть рекламный блок

Всё для компа

chat

Видео дня

Популярное

Реклама

Хочешь помочь проекту? Установи наш баннер!

Партнёры



Развлекательный портал по игре Dota 2. У нас вы первым узнаете о последних игровых новостях, сможете почитать интересные статьи и гайды, посмотреть стримы популярных комментаторов и многое другое.

Про-софт - сайт професионального софта. Ето сайт не только софта но также игровых дополнений, музыки, фильмов, игр для ПК а также читов для ПК игр. Постоянное обновление материалов и каждый день появляется чтото новенькое!

Авторизация

Реклама

Хочешь помочь проекту? Установи наш баннер!

Опрос

Если не спиться

1. лечь спать а не сидеть за компом до 6 утра
2. утопиться
3. обкуриться
4. воды напиться
5. задолбиться
6. обмочиться
7. выпрямиться

Реклама

Хочешь помочь проекту? Установи наш баннер!

Популярные тэги

Комментарии

Счетчики

На сайте: 2
Прохожие: 2
Пользователей: 0
Статус:

Счётчик тИЦ и PR Rambler's Top100
HTML и DHTML [2] JavaScript [5]
Mootools [2] JQuery [22]
Разное [2] CSS [4]
PHP [1]
АвторАвтор: leonP4 | ДатаДата: 15.09.2010 |Голосов: 0


Интересный плагин на 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. и наполнить содержимым.

Автор: Материал подготовил leonP4

Источник : прямая ссылка на источник


Теги к статье:

| : jQuery, эффект, CSS3, Yoyo, наведения
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Популярные файлыНовые файлы
Call of Duty 5: World at ...[ Скачали 67893 раз ]
Амфибии, Гайд по ассасина...[ Скачали 32255 раз ]
Амфибии, Гайд по шаманам.[ Скачали 31133 раз ]
cs 1.6 patch v48 full[ Скачали 29562 раз ]
Русский бот PW Alfa v 2.6[ Скачали 17746 раз ]
Огромный пак глюков и баг...[ Скачали 13222 раз ]
civilization 5 скачать бе...[ Скачали 12278 раз ]
PW MP5[ Скачали 11595 раз ]
MHS-Bot-PW 2.3 ботовод[ Скачали 11000 раз ]
Niko Bellic (нико белич) ...[ Скачали 10349 раз ]
Wallpapers Girls №1197[ Добавлен 11.08.2025 ]
Wallpapers Mix №1965[ Добавлен 11.08.2025 ]
Wallpapers Mix №1964[ Добавлен 09.08.2025 ]
Wallpapers Mix №1963[ Добавлен 06.08.2025 ]
Wallpapers Mix №1962[ Добавлен 30.07.2025 ]
Wallpapers Mix №1961[ Добавлен 29.07.2025 ]
Wallpapers Mix №1960[ Добавлен 27.07.2025 ]
Wallpapers Mix №1959[ Добавлен 26.07.2025 ]
Wallpapers Mix №1958[ Добавлен 23.07.2025 ]
Wallpapers Mix №1957[ Добавлен 21.07.2025 ]