Ett dynamiskt gränssnitt på din webbplats kommer att fånga användarnas uppmärksamhet och öka trafiken. Att skapa en animerad rubrik för en webbplats är inte så svårt som det verkar vid första anblicken.
Instruktioner
Steg 1
Låt oss försöka skapa en animerad rubrik som ändrar konfigurationen när muspekaren svävar över den. Till exempel konverterades en svartvit bild i en rubrik till färg vid interaktion eller ändrades till en annan.
Steg 2
Installera jQuery-biblioteket på din dator efter att du laddat ner det från den officiella webbplatsen (jquery.com).
Steg 3
Länka biblioteket till din html-fil mellan huvudtaggarna med hjälp av skripttaggen:
Steg 4
Välj två bilder som ska ersätta varandra när användaren interagerar med rubriken. Om du vill ha en övergång från svartvitt till färg skapar du en kopia av bilden och avmättar den i Photoshop.
Steg 5
Skapa en lista med två objekt i html-dokumentet och bifoga bilder till var och en med hjälp av bildtaggen. Tillämpa till exempel en stilklass på listan
Steg 6
Gör detta i div som är ansvarig för din sidhuvud. Ange först adressen till bilden som ska återspeglas i ett statiskt tillstånd och sedan den som visas på svävaren.
Steg 7
Lägg till class = "pervaya" till den första bilden och class: "vtoraya" till den andra bilden.
Steg 8
I den bifogade css-filen anger du absolut placering av element (position: absolut;), fast höjd och bredd (höjd och bredd) för dessa klasser.
Steg 9
Lägg bilderna ovanpå varandra. Använd z-index-stilen för detta. Det låter dig justera element längs z-axeln, som går bort från oss i skärmens djup.
Steg 10
För själva listan, ange fördjupning, inriktning du behöver och ta bort listobjekten (liststil-typ: ingen;).
Steg 11
Skapa en.js-fil och klistra in följande kod i den:
$ (dokument). klar (funktion () {
$ ("img.grey"). sväva (funktion () {
$ (detta).stop (). animera ({"opacitet": "0"}, "långsam");
}, funktion () {
$ (detta).stop (). animera ({"opacitet": "1"}, "långsam");
});
});
Steg 12
Den här koden animerar din rubrik till handling. Glöm inte att ansluta.js-filen till html-dokumentet.
