Dynamické rozhranie na vašom webe upúta pozornosť používateľov a zvýši prenos. Vytvorenie animovanej hlavičky pre web nie je také náročné, ako sa na prvý pohľad zdá.
Inštrukcie
Krok 1
Pokúsme sa vytvoriť animovanú hlavičku, ktorá zmení svoju konfiguráciu, keď nad ňu umiestnite kurzor myši. Napríklad čiernobiely obrázok v hlavičke bol pri interakcii prevedený na farebný alebo zmenený na iný.
Krok 2
Po stiahnutí z oficiálnej webovej stránky (jquery.com) si do počítača nainštalujte knižnicu jQuery.
Krok 3
Prepojte knižnicu s html súborom medzi hlavičkovými značkami pomocou značky skriptu:
Krok 4
Vyberte dva obrázky, ktoré sa nahradia pri interakcii používateľa s hlavičkou. Ak chcete mať prechod z čiernej a bielej na farebnú, vytvorte kópiu obrázka a vo Photoshope ho desaturujte.
Krok 5
Vytvorte zoznam dvoch položiek v html-dokumente a ku každej pripojte obrázky pomocou obrázkovej značky. Napríklad použite triedu štýlov na samotný zoznam
Krok 6
Urobte to v div, ktorý je zodpovedný za hlavičku vašej stránky. Najskôr zadajte adresu obrázka, ktorá by sa mala prejaviť v statickom stave, a potom adresu, ktorá sa zobrazí pri umiestnení kurzora myši.
Krok 7
Pridajte k prvému obrázku triedu = "pervaya" a k druhému obrázku triedu: "vtoraya".
Krok 8
V priloženom súbore css zadajte absolútne umiestnenie prvkov (position: absolute;), pevnú výšku a šírku (výška a šírka) pre tieto triedy.
Krok 9
Vrstvte obrázky na seba. Použite na to štýl z-indexu. Umožňuje vám zarovnať prvky pozdĺž osi z, ktorá od nás v hĺbke obrazovky odchádza.
Krok 10
Pre samotný zoznam zadajte odsadenie, zarovnanie, ktoré potrebujete, a odstráňte položky zoznamu (list-style-type: none;).
Krok 11
Vytvorte súbor.js a vložte do neho nasledujúci kód:
$ (document).ready (function () {
$ ("img.grey"). hover (function () {
$ (this).stop (). animate ({"opacity": "0"}, "slow");
}, function () {
$ (this).stop (). animate ({"opacity": "1"}, "slow");
});
});
Krok 12
Tento kód oživí vašu hlavičku v akcii. Nezabudnite pripojiť súbor.js k html dokumentu.
