Динамичният интерфейс на вашия сайт ще привлече вниманието на потребителите и ще увеличи трафика. Създаването на анимиран хедър за уебсайт не е толкова трудно, колкото изглежда на пръв поглед.
Инструкции
Етап 1
Нека се опитаме да направим анимиран хедър, който ще промени конфигурацията си, когато курсорът на мишката се наведе над него. Например, черно-бяла картина в заглавна част е превърната в цветна при взаимодействие или е променена на друга.
Стъпка 2
Инсталирайте библиотеката jQuery на вашия компютър, след като я изтеглите от официалния уебсайт (jquery.com).
Стъпка 3
Свържете библиотеката с вашия html файл между маркерите за глава, като използвате маркера на скрипта:
Стъпка 4
Изберете две снимки, които ще се заменят една друга, когато потребителят взаимодейства със заглавката. Ако искате да преминете от черно-бяло към цветно, създайте копие на картината и я десатурирайте във Photoshop.
Стъпка 5
Създайте списък с два елемента в html-документа и прикачете снимки към всеки с помощта на маркера на изображението. Приложете клас на стил например към самия списък
Стъпка 6
Направете това в div, който отговаря за заглавката на вашия сайт. Първо посочете адреса на изображението, което трябва да бъде отразено в статично състояние, и след това този, който се появява при нанасяне на курсора на мишката.
Стъпка 7
Добавете class = "pervaya" към първата снимка и class: "vtoraya" към втората снимка.
Стъпка 8
В прикачения css файл посочете абсолютно позициониране на елементи (position: absolute;), фиксирана височина и ширина (височина и ширина) за тези класове.
Стъпка 9
Наслоявайте картините една върху друга. Използвайте стила z-index за това. Тя ви позволява да подравнявате елементи по оста z, която се отдалечава от нас в дълбочината на екрана.
Стъпка 10
За самия списък посочете отстъпа, подравняването, от което се нуждаете, и премахнете елементите от списъка (тип-списък-тип: няма;).
Стъпка 11
Създайте.js файл и поставете следния код в него:
$ (документ).ready (функция () {
$ ("img.grey"). hover (функция () {
$ (this).stop (). animate ({"opacity": "0"}, "slow");
}, функция () {
$ (this).stop (). animate ({"opacity": "1"}, "slow");
});
});
Стъпка 12
Този код ще оживи заглавката ви в действие. Не забравяйте да свържете.js файла с html документа.
