Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. HTML
Webdesign

Un rápido efecto de flotador en pantalla completa con CSS y JavaScript

by
Difficulty:BeginnerLength:ShortLanguages:

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

En el tutorial rápido de hoy, aprenderemos cómo crear un útil efecto de fondo de pantalla completa.

Como dice el refrán: "una imagen vale más que mil palabras", así que veamos lo que vamos a crear:

En el mundo real, puedes usar este tipo de efecto como vista rápida para sus productos, fotos, etc. ¡Empecemos!

1. Comience con el marcado de la página

Comenzaremos marcando solo dos elementos:

El elemento .bg será un elemento vacío.

El elemento .container contendrá el contenido de la página. En su interior, pondremos cuatro enlaces. Asociaremos cada enlace con una imagen a través del atributo personalizado data-bg como este:

2. Agregue el CSS

Continuemos con algunos CSS básicos.

Le daremos al .container un ancho máximo y alinearemos horizontalmente su contenido:

Por razones estilísticas, en lugar del valor de la propiedad predeterminada text-decoration: underline, usaremos border-bottom un borde inferior para subrayar los enlaces de texto:

A continuación, definiremos el pseudoelemento ::before para los enlaces. Esto inicialmente estará oculto. Aparecerá con un efecto horizontal de "obturador", cada vez que pasemos el mouse sobre su enlace principal.

Sus estilos iniciales:

El elemento .bg también estará oculto visualmente de forma predeterminada (opacity: 0). Además, estará en una posición absoluta y cubrirá todo el ancho y la altura de su contenedor (en este caso body).

Aquí están sus estilos iniciales:

3. Agrega el código JavaScript

Precarga de Imágenes

Con el código HTML y CSS en su lugar, el siguiente paso es necesario para precargar las imágenes data-bg. Lo haremos con sólo unas líneas de código:

Este código itera a través de todos los enlaces de la página, toma el valor del atributo data-bg de cada uno y crea algunas instancias img utilizando el constructor Image().

Entonces, si volvemos a cargar la página y miramos la pestaña Red en el inspector del navegador, veremos que todas las imágenes se han descargado/precargado:

Showing the background images in the Network tab of our browser

Esta es una acción vital para prevenir el destello blanco que ocurriría la primera vez que pasemos el mouse sobre un enlace. Sin la carga previa, en ese momento el navegador aún no habrá descargado la imagen y puede pasar un tiempo hasta que aparezca la imagen.

Si desea probar este comportamiento, primero comente el código antes mencionado, luego abra la pestaña Red y vuelva a cargar la página.

Alterna las imágenes

Cada vez que pasamos el mouse sobre un enlace, debemos hacer lo siguiente:

  • Tome la imagen relacionada que se almacena en el atributo data-bg.
  • Establezca esa imagen como la imagen de fondo del elemento .bg.
  • Agregue la clase bg-show a body. Esta clase asegurará dos cosas. En primer lugar, que el .bg aparecerá con un efecto de desvanecimiento y se ubicará en la parte superior de cada elemento, aparte del enlace activo. En segundo lugar, que el pseudo-elemento del enlace activo aparecerá con un efecto horizontal de obturación.

Por otro lado, cada vez que el cursor deje un enlace, eliminaremos la clase bg-show del body y el .bg desaparecerá.

Aquí está el código JavaScript correspondiente:

Y los estilos relacionados:

Conclusión

¡Eso es todo amigos! Con solo unas pocas líneas de código, logramos crear un interesante efecto para fondo de pantalla completa.

Espero que hayas disfrutado la demostración y te hayas inspirado para construir algo similar en un próximo proyecto.

Como siempre, ¡muchas gracias por leer!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.