Et dynamisk grensesnitt på nettstedet ditt vil fange brukernes oppmerksomhet og øke trafikken. Å lage en animert topptekst for et nettsted er ikke så vanskelig som det virker ved første øyekast.
Bruksanvisning
Trinn 1
La oss prøve å lage en animert topptekst, som vil endre konfigurasjonen når musepekeren svever over den. For eksempel ble et svart-hvitt-bilde i en overskrift konvertert til farge ved interaksjon eller endret til et annet.
Steg 2
Installer jQuery-biblioteket på datamaskinen din etter at du har lastet den ned fra det offisielle nettstedet (jquery.com).
Trinn 3
Koble biblioteket til html-filen din mellom hodetaggene ved hjelp av skriptekoden:
Trinn 4
Velg to bilder som skal erstatte hverandre når brukeren kommuniserer med overskriften. Hvis du vil ha en overgang fra svart-hvitt til farge, lager du en kopi av bildet og avmetter det i Photoshop.
Trinn 5
Lag en liste over to elementer i html-dokumentet og legg til bilder til hver ved hjelp av bildekoden. Bruk for eksempel en stilklasse på selve listen
Trinn 6
Gjør dette i div som er ansvarlig for nettstedets overskrift. Først angir du adressen til bildet som skal reflekteres i en statisk tilstand, og deretter den som vises på sveveren.
Trinn 7
Legg til class = "pervaya" til det første bildet, og class: "vtoraya" til det andre bildet.
Trinn 8
I den vedlagte css-filen spesifiserer du absolutt posisjonering av elementer (posisjon: absolutt;), fast høyde og bredde (høyde og bredde) for disse klassene.
Trinn 9
Legg bildene oppå hverandre. Bruk z-indeksstilen til dette. Den lar deg justere elementer langs z-aksen, som går bort fra oss i dybden på skjermen.
Trinn 10
For selve listen, spesifiser innrykk, justering du trenger og fjern listeelementene (liste-stil-type: ingen;).
Trinn 11
Opprett en.js-fil og lim inn følgende kode i den:
$ (dokument). klar (funksjon () {
$ ("img. grå"). svever (funksjon () {
$ (dette).stop (). animere ({"opacity": "0"}, "slow");
}, funksjon () {
$ (dette).stop (). animere ({"opacity": "1"}, "slow");
});
});
Trinn 12
Denne koden vil animere overskriften din til handling. Ikke glem å koble.js-filen til html-dokumentet.
