Вывеска на ветру - привлекает внимание!

Пятница, 26 апреля 2013 года в 13:55      Просмотров: 4827
Вывеска на ветру - привлекает внимание!

Привет дорогие друзья hello Недавно бродил по просторам интернета, и наткнулся на один сайт.

Сайт как сайт… Но он привлек мое внимание одним интересным элементом. В его шапке болталась красивая табличка. При наведении на нее – она раскачивалась еще больше surprised

В общем – мне стало интересно. И я решил выдрать ее с сайта. Разложить все по полочкам. А затем уже – поделиться своими открытиями с вами, мои дорогие друзья.

Что у меня получилось – можете посмотреть нажав на кнопку ниже:

Зацените вывеску

А вот и сам сайт, от куда я выдирал этот скрипт: http://hired.im/

Ниже видео по его настройке и установке:

Файлы скрипта и картинки в PSD:

Что бы скачать файлы - нажмите на одну из кнопок ниже. А если Вам понравился урок - жмите на все rolleyes

Внимание! При нажатие на кнопку Мне нравится от Вконтакте - жмите на ссылку - рассказать друзьям. Иначе замок не раскроется.

Загрузка замка...

Куски кода из видео:

Это jquery, можете подключить с вашего сайта, если есть:

<script src="js/jquery.min.js"></script>

Маленький скрипт, отвечающий за раскачивание:

$(document).ready(function() {
  function swing(){
     $('.logo_tab').toggleClass('right_tab');
     setTimeout(swing, 1000);
  }
  swing();
});

Указываем ссылку и картинку:

<a class="logo_tab right_tab" href="http://saratov-adsl.ru"><img src="logos/logo2q.png" alt="Табличка на ветру"></a>

Стили для ссылки в которую заключена картинка:

a.logo_tab { float: left; margin: -125px 0 -20px -30px; }
a.logo_tab img { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); -ms-transform:rotate(0deg); transform:rotate(0deg); } 
a.logo_tab.right_tab img { -moz-transform:rotate(-7deg); -webkit-transform:rotate(-7deg); -o-transform:rotate(-7deg); -ms-transform:rotate(-7deg); transform:rotate(-7deg); }
a.logo_tab:hover img { -moz-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -o-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg); }
a.logo_tab.right_tab:hover img { -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); -o-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg); }

Ну вот вроде и все. Если что то не понятно - смотрите видео. В нем я все подробно разъясняю.

Комментариев: 28

Блин, вот беда, не могу нажать g+ выдаёт ошибку

Возможно, сервис Google+ или доступ к нему с мобильных устройств отключен в вашем домене. Обратитесь за помощью к своему администратору.
. А статья супер как и предыдущие!

Приветствую, Сергей. Действительно здорово, необычно. Обязательно установлю у себя. Мне нравиться все новое и оригинальное. Спасибо!

Привет, Серж! Прикольный скрипитус, обязательно использую! Ну ты как всегда - на высоте!smile

Спасибо. Следующий сайт буду на максайт (в рифму вышло). А то тут freehost заглючил. Надо искать хостинг под этот движок, чтобы уж наверняка.

10. Лилиана
2013-04-27 в 23:29:59

я нажала нравиться и поделиться с друзьями в контакте, а ссылка так и не пояыилась...

11. Сергей
2013-04-28 в 01:47:48

Так Серега, а как его подключить этот скрипт? Ничего не выходит почему то.

12. виктор
2013-04-28 в 08:36:05

Привет"Кольт"!

Интересненький материальчик.но беда"

На видео только черный экранчик(возможно

это только у меня),т.е типа аудио курса.

Жаль!

А вообще "Спасибо за новинку"!

13. Аноним
2013-04-28 в 22:10:37

Спасибо, проделала все по видео, все получилось, а на свой сайт ucoz не получается поставить

14. Сергей
2013-04-29 в 01:35:34

Серега привет. Рассказывай как подключить скрипт на WP/ Сразу же нажму еще на соц кнопку. Гарантия

Сергей - подключить куда?

Виктор - обнови флеш плеер

В ucoz я не разбираюсь

Серёга smile я бы подсказал - не жалко, да вот только я вордпрессом не занимаюсь.

17. Сергей
2013-04-30 в 01:19:19

Тогда еще вопрос Серега! Этот скрипт на WP работать будет? Или зря я его туда заталкиваю. Но если ты не тестировал его на WP, то вопрос видимо не корректный. Спасибо брат!

Почему нельзя? Можно куда угодно всунуть. Я просто не знаю как это всунуть на вордпресс smile

Ну блин, Серега! У тебя что ни пост - то бомба. Спасибо! Попробую.

20. Роман
2013-06-11 в 21:48:07

Сергей, а как называется такой скрипт с кнопками соц сетей для получения ссылок? Это случайно не плагин "социальный замок" для wp?

Привет. Да. Только вот это не просто плагин а сервис, который можно использовать на любом сайте.

Здесь я рассказываю о нем подробно: http://saratov-adsl.ru/page/soc200

22. Андрей
2013-07-16 в 19:54:59

Прикольная штука.

Я нажал на "мне нравится" ВКонтакте, но ссылки для скачивания не появилось.((

Внимание! При нажатие на кнопку Мне нравится от Вконтакте - жмите на ссылку - рассказать друзьям. Иначе замок не раскроется.
24. Кристина
2013-07-25 в 19:13:42

Спасибки огромное, как раз то, что надо!!!

Спасибо за урок,скачала, буду пробовать.Кнопочки нажала все.

Сергей! Спасибо огромное за урок, так здорово, очень хочется сделать такой же, буду пробовать у себя на вордпрессе, кнопочки в гугле твиттере нажала и присоединилась к вам, теперь буду в курсе ваших новинок, а они все классные))

28. Людмила
2013-08-20 в 11:11:54

КЛАССНО ! ЖАЛЬ, ЧТО Я ЕЩЁ ПЛОХО ЗНАЮ ИНТЕРНЕТ.

Оставьте комментарий!

Вы можете войти под своим логином или зарегистрироваться на сайте.

Авторизация MaxSiteAuth. Войти через loginza

(обязательно)