Agrega un efecto parallax a tu header con vanillaJS

Agrega un efecto parallax a tu header con vanillaJS Ver en codepen

En este nuevo artículo les compartiré cómo poder agregar un efecto parallax al header de nuestro blog. El código está escrito en vanillaJS como es costumbre, así que sin más que decir, ¡empecemos!

¿Cómo funciona?

El script generará un atributo style con el parámetro background-position-y y cada vez que hagamos scroll, el fondo del header se subirá unos pocos pixeles hacía arriba a medida que bajamos y dejará de sumar pixeles cuando hayamos sobrepasado el alto de este. En caso de volver a la cima de la página, ocurrirá lo contrario: es decir, se restarán los pixeles que se hayan agregado.

El código tiene cómo condición solo ejecutarse en desktop y omitirse en smartphones y tablets.

A tener en cuenta

La imagen de fondo del header debe contar con el suficiente ancho para que no ocurra un efecto no deseado. Se recomienda una imagen con por lo menos unos 700px de alto o superior mientras que el header tenga un alto mínimo de 400px. La imagen utilizada en el ejemplo tiene 1400x700 pixeles y el header 400px respectivamente.

Instalar

Esta instalación es exclusiva de blogger, pero podemos agregarlo perfectamente en cualquier otro CMS de nuestra preferencia.

Agregar javascript

Nos iremos a nuestro panel » tema » editar HTML y buscaremos la siguiente etiqueta: </body> y pegaremos el siguiente código javascript:

Dónde selector_header es el selector css de nuestro header que contiene la imagen que deseamos darle el efecto parallax.

Asegúrate que el selector contenga por lo menos la propiedad background-image o background-image y que este contenga una imagen como fondo.

Guardamos los cambios y ya deberíamos de tener listo nuestro sencillo pero eficaz efecto parallax sobre el header de nuestra cabecera.


Bueno, hasta aquí llegamos con éste corto artículo, espero les haya sido de utilidad. Si el post te ha gustado y/o tienes alguna duda u opinión no dudes en dejarlo en los comentarios. Si puedes te invito a que compartas por redes sociales esta entrada, eso me ayudaría muchísimo. Hasta pronto y que estén bien.

Otros artículos que quizá te gusten.

cargando...

Comentarios

Publicar un comentario