En dynamisk grænseflade på dit websted vil få brugernes opmærksomhed og øge trafikken. At lave et animeret header til et websted er ikke så svært, som det ser ud ved første øjekast.
Instruktioner
Trin 1
Lad os prøve at lave et animeret header, som ændrer konfigurationen, når musemarkøren svæver over den. For eksempel blev et sort-hvidt billede i en overskrift konverteret til farve ved interaktion eller ændret til et andet.
Trin 2
Installer jQuery-biblioteket på din computer efter download af det fra det officielle websted (jquery.com).
Trin 3
Link biblioteket til din html-fil mellem hovedtags ved hjælp af script-tagget:
Trin 4
Vælg to billeder, der erstatter hinanden, når brugeren interagerer med overskriften. Hvis du vil have en overgang fra sort / hvid til farve, skal du oprette en kopi af billedet og desaturere det i Photoshop.
Trin 5
Opret en liste med to emner i html-dokumentet, og vedhæft billeder til hver ved hjælp af billedkoden. Anvend f.eks. En stilklasse på selve listen
Trin 6
Gør dette i div, der er ansvarlig for dit webstedsoverskrift. Angiv først adressen på billedet, der skal reflekteres i en statisk tilstand, og derefter den, der vises på markøren.
Trin 7
Føj klasse = "pervaya" til det første billede og klasse: "vtoraya" til det andet billede.
Trin 8
I den vedhæftede css-fil skal du angive absolut placering af elementer (position: absolut;), fast højde og bredde (højde og bredde) for disse klasser.
Trin 9
Læg billederne oven på hinanden. Brug z-index-stilen til dette. Det giver dig mulighed for at justere elementer langs z-aksen, som går væk fra os i dybden af skærmen.
Trin 10
For selve listen skal du angive indrykningen, justeringen, du har brug for, og fjerne listeelementerne (liste-stil-type: ingen;).
Trin 11
Opret en.js-fil og indsæt følgende kode i den:
$ (dokument). klar (funktion () {
$ ("img.grey"). svæver (funktion () {
$ (denne).stop (). animere ({"opacitet": "0"}, "langsom");
}, funktion () {
$ (denne).stop (). animere ({"opacitet": "1"}, "langsom");
});
});
Trin 12
Denne kode vil animere dit header til handling. Glem ikke at forbinde.js-filen til html-dokumentet.
