ЯК зробити анімовану шапку для сайту

Динамічний інтерфейс на вашому сайті приверне увагу користувачів і підвищить відвідуваність. Зробити анімовану шапку для сайту не так складно, як здається на перший погляд.

Інструкція

Постараємося зробити анімовану шапку, яка при наведенні на неї курсора миші буде змінювати свою конфігурацію. Наприклад, чорно-біла картинка в шапці перетворювалася в кольорову при взаємодії або змінювалася на іншу.

Встановіть на свій комп`ютер бібліотеку JQuery, попередньо скачавши її на офіційному сайті (jquery.com).

Підключіть бібліотеку до свого html-файлу між тегами head, використовуючи для цього тег script:
.

Виберіть дві картинки, які при взаємодії користувача з шапкою будуть змінювати один одного. Якщо ви хочете, щоб був перехід з чорно-білого режиму в кольоровий, то створіть копію картинки і обесцветьте її в Photoshop.

Створіть у html-документі список з двох пунктів і до кожного прикріпіть картинки, використовуючи тег image. До самого списку застосуєте клас стилів, наприклад

Робіть це в тому діві (div), який у вас відповідає за шапку сайту. Спочатку вкажіть адресу картинки, яка повинна відображатися в статичному стані, а потім ту, яка з`являтися при наведенні.

Пропишіть до першої картинки class = "pervaya", а до другої class: "vtoraya".

В прикріпленому файлі css вкажіть для цих класів абсолютне позиціонування елементів (position: absolute-), фіксовану висоту і ширину (height і width).

Накладіть картинки один на одного шарами. Використовуйте для цього стиль z-index. Він дозволяє вирівнювати елементи по осі z, яка йде від нас в глибину екрану.

Для самого списку вкажіть потрібні вам відступи, вирівнювання і приберіть пункти списку (list-style-type: none;).

Створіть файл з розширенням .js і вставте в нього наступний код:
$ (Document) .ready (function () {

$ ("Img.grey"). Hover (
function () {
$ (This) .stop (). Animate ({"opacity": "0"}, "slow") -
},
function () {
$ (This) .stop (). Animate ({"opacity": "1"}, "slow") -
}) -
}) -

Цей код призведе анімацію вашої шапки в дію. Не забудьте підключити файл .js до html-документу.