O interfață dinamică de pe site-ul dvs. va atrage atenția utilizatorilor și va crește traficul. Realizarea unui antet animat pentru un site web nu este atât de dificilă pe cât pare la prima vedere.
Instrucțiuni
Pasul 1
Să încercăm să facem un antet animat, care își va schimba configurația atunci când cursorul mouse-ului se deplasează deasupra acestuia. De exemplu, o imagine alb-negru dintr-un antet a fost convertită în culoare la interacțiune sau schimbată în alta.
Pasul 2
Instalați biblioteca jQuery pe computer după ce ați descărcat-o de pe site-ul oficial (jquery.com).
Pasul 3
Conectați biblioteca la fișierul dvs. html între etichetele de cap folosind eticheta de script:
Pasul 4
Selectați două imagini care se vor înlocui reciproc atunci când utilizatorul interacționează cu antetul. Dacă doriți să aveți o tranziție de la alb și negru la culoare, atunci creați o copie a imaginii și desaturați-o în Photoshop.
Pasul 5
Creați o listă de două elemente în documentul html și atașați imagini la fiecare folosind eticheta imagine. Aplicați o clasă de stil listei în sine, de exemplu
Pasul 6
Faceți acest lucru în div care este responsabil pentru antetul site-ului dvs. Mai întâi, specificați adresa imaginii care trebuie reflectată într-o stare statică, apoi pe cea care apare pe hover.
Pasul 7
Adăugați class = "pervaya" la prima imagine și class: "vtoraya" la a doua imagine.
Pasul 8
În fișierul CSS atașat, specificați poziționarea absolută a elementelor (poziția: absolut;), înălțimea și lățimea fixe (înălțimea și lățimea) pentru aceste clase.
Pasul 9
Puneți imaginile una peste alta. Utilizați stilul Z-index pentru aceasta. Vă permite să aliniați elemente de-a lungul axei Z, care se îndepărtează de noi în profunzimea ecranului.
Pasul 10
Pentru lista în sine, specificați indentarea, alinierea de care aveți nevoie și eliminați elementele listei (list-style-type: none;).
Pasul 11
Creați un fișier.js și lipiți următorul cod în el:
$ (document). ready (function () {
$ ("img.grey"). plasați cursorul (function () {
$ (this).stop (). animate ({"opacity": "0"}, "slow");
}, function () {
$ (this).stop (). animate ({"opacity": "1"}, "slow");
});
});
Pasul 12
Acest cod vă va anima antetul în acțiune. Nu uitați să conectați fișierul.js la documentul html.
