А теперь давайте перейдем непосредственно к процессу установки. Перед установкой загрузите изображение в папку с картинками на вашем сервере и папку js из архива, если у вас на сайте на этот момент еще не подключена библиотека jQuery.
ШАГ 1. Подключение библиотеки jQuery. Если таковая уже установлена на вашем сайте, то подключить ее нужно, прописав такую строку кода в head сайта:
<script src="js/jquery.min.js"></script>
Если путь к папке js, выделенный красным цветом, у вас отличается от моего, то измените его.
Если вы еще не использовали на сайте jQuery, то можно подключить библиотеку из AppGoogle. Делается это такой строкой кода:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
ШАГ 2. Теперь там же, в head нужно добавить вот такой небольшой код, отвечающий за раскачивание вывески:
<script type="text/javascript">
$(document).ready(function() {
function swing(){
$('.logo_tab').toggleClass('right_tab');
setTimeout(swing, 1000);
}
swing();
});
</script>
ШАГ 3. Переходим к телу сайта (body) и делаем вывеску ссылкой на любую страницу вашего сайта. Например, у меня ссылка ведет на главную страницу, вы можете указать любую, хоть стороннюю.
Для ссылки прописываем такую строку в коде:
<a class="logo_tab right_tab" href="http://sayt-s-nulya.ru"><img src="images/vyveska.png" alt="Раскачивающаяся вывеска"></a>
В данной строке содержимое, выделенное красным, меняете на свое - указываете адрес своего сайта или любого другого, затем указываете папку, в которой хранится изображение вывески и можете прописать свое описание.
ШАГ 4. Теперь добавим немного стилей для эффекта более сильного раскачивания при наведении курсора, добавляется в body :
<style type="text/css">
.container {margin: 0 auto; max-width: 980px; padding: 10px; width: 100%; }
a.logo_tab {float: none; margin: -125px 0 -20px 50px; }
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); }
</style>
На этом установка завершена! Скачать архив с готовыми изображениями вывески и файлом js можно по прямой ссылке с Яндекс.Диска. На этом сегодняшний урок завершен, всем желаю творческого подхода и оригинальных идей в работе над сайтом!
До новых встреч! С ув. Светлана (SvetLana_TSV)