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

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

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

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

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

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

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

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

прямая ссылка

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

Это 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="https://expert-css.com"><img src="logos/logo2.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); }

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