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

2 ноября 2014 г. Просмотров: 783 Инструкции
Динамический интерфейс на вашем сайте привлечет внимание пользователей и повысит посещаемость. Сделать анимированную шапку для сайта не так сложно, как кажется на первый взгляд.
Создать сайт самостоятельно с 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-документу.
    Оцените статью!