Как сделать анимированную шапку для сайта?

2 ноября 2014 г.

Динамический интерфейс на вашем сайте привлечет внимание пользователей и повысит посещаемость. Сделать анимированную шапку для сайта не так сложно, как кажется на первый взгляд.
Создать сайт самостоятельно с Wix.com

Инструкция

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

Установите на свой компьютер библиотеку 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-документу.

Оцените статью!

Также читайте: