Una interfaz dinámica en su sitio captará la atención de los usuarios y aumentará el tráfico. Hacer un encabezado animado para un sitio web no es tan difícil como parece a primera vista.
Instrucciones
Paso 1
Intentemos hacer un encabezado animado, que cambiará su configuración cuando el cursor del mouse esté sobre él. Por ejemplo, una imagen en blanco y negro en un encabezado se convirtió a color al interactuar o se cambió a otra.
Paso 2
Instale la biblioteca jQuery en su computadora después de descargarla del sitio web oficial (jquery.com).
Paso 3
Vincula la biblioteca a tu archivo html entre las etiquetas de la cabeza usando la etiqueta de secuencia de comandos:
Paso 4
Seleccione dos imágenes que se reemplazarán entre sí cuando el usuario interactúe con el encabezado. Si desea tener una transición de blanco y negro a color, cree una copia de la imagen y desaturarla en Photoshop.
Paso 5
Cree una lista de dos elementos en el documento html y adjunte imágenes a cada uno con la etiqueta de imagen. Aplicar una clase de estilo a la propia lista, por ejemplo
Paso 6
Haga esto en el div que es responsable del encabezado de su sitio. Primero, especifique la dirección de la imagen que debe reflejarse en un estado estático, y luego la que aparece al pasar el mouse.
Paso 7
Agrega class = "pervaya" a la primera imagen y class: "vtoraya" a la segunda imagen.
Paso 8
En el archivo css adjunto, especifique la posición absoluta de los elementos (posición: absoluta;), alto y ancho fijo (alto y ancho) para estas clases.
Paso 9
Coloque las imágenes una encima de la otra. Utilice el estilo de índice z para esto. Te permite alinear elementos a lo largo del eje z, que se aleja de nosotros en la profundidad de la pantalla.
Paso 10
Para la lista en sí, especifique la sangría, la alineación que necesita y elimine los elementos de la lista (list-style-type: none;).
Paso 11
Cree un archivo.js y pegue el siguiente código en él:
$ (documento).ready (function () {
$ ("img.grey"). hover (function () {
$ (esto).stop (). animate ({"opacidad": "0"}, "lento");
}, function () {
$ (esto).stop (). animate ({"opacidad": "1"}, "lento");
});
});
Paso 12
Este código animará su encabezado a la acción. No olvide conectar el archivo.js al documento html.
