Una interfície dinàmica del vostre lloc atraurà l'atenció dels usuaris i augmentarà el trànsit. Fer una capçalera animada per a un lloc web no és tan difícil com sembla a primera vista.
Instruccions
Pas 1
Intentem fer una capçalera animada, que canviarà la seva configuració quan el cursor del ratolí estigui sobre ella. Per exemple, una imatge en blanc i negre d'una capçalera es va convertir en color en interaccionar o es va canviar a una altra.
Pas 2
Instal·leu la biblioteca jQuery al vostre ordinador després de descarregar-la del lloc web oficial (jquery.com).
Pas 3
Enllaceu la biblioteca al fitxer html entre les etiquetes de capçalera mitjançant l'etiqueta de script:
Pas 4
Seleccioneu dues imatges que se substituiran entre si quan l'usuari interactua amb la capçalera. Si voleu passar del blanc i negre al color, creeu una còpia de la imatge i dessatureu-la a Photoshop.
Pas 5
Creeu una llista de dos elements al document html i adjunteu imatges a cadascun mitjançant l'etiqueta d'imatge. Apliqueu una classe d'estil a la llista, per exemple
Pas 6
Feu-ho a la divisió responsable de la capçalera del lloc. Primer, especifiqueu l'adreça de la imatge que s'hauria de reflectir en un estat estàtic i, a continuació, la que apareix al cursor.
Pas 7
Afegiu class = "pervaya" a la primera imatge i class: "vtoraya" a la segona imatge.
Pas 8
Al fitxer css adjunt, especifiqueu el posicionament absolut dels elements (posició: absolut;), alçada i amplada fixes (alçada i amplada) per a aquestes classes.
Pas 9
Capa les imatges les unes sobre les altres. Utilitzeu l'estil d'índex z per a això. Us permet alinear elements al llarg de l’eix z, que s’allunya de nosaltres a la profunditat de la pantalla.
Pas 10
Per a la mateixa llista, especifiqueu la sagnia, l'alineació que necessiteu i elimineu els elements de la llista (llista-estil-tipus: cap;).
Pas 11
Creeu un fitxer.js i enganxeu-hi el codi següent:
$ (document). ready (function () {
$ ("img.grey"). passeu el cursor (function () {
$ (this).stop (). animate ({"opacity": "0"}, "slow");
}, function () {
$ (this).stop (). animate ({"opacity": "1"}, "slow");
});
});
Pas 12
Aquest codi animarà la vostra capçalera a l'acció. No oblideu connectar el fitxer.js al document html.
