GeneratePress snippets: Efecto parallax con imágenes

Hay que tener en cuenta que este efecto parallax para GeneratePress aunque a veces es espectacular hace que la carga de la web sea más lenta al tener ele navegador que manejar dos imágenes superpuestas o texto encima de la imagen. Personalmente me gusta pero no lo suelo usar en mis páginas, prefiero más la carga rápida sobretodo para móviles, me gustan minimalistas.

Pero hay veces que se queda chulo y merece la pena usarlo, queda mucho mejor cuando se ve en la pantalla de un ordenador.

El módulo Page Headers de GP trae la opción de Parallax además en el nuevo y genial módulo Elements.

Normalmente la usamos con una imagen de fondo y el texto por encima haciendo el efecto.

¿Pero y si necesitamos hacerlo con dos imágenes?

Bueno he hecho unos snippets que si bien no sirve para todos los parallax si te puede ayudar como inicio para hacer los tuyos.

El primero

Con las dos imágenes full width, aprovechando el CSS framework Unsemantic que ya trae incrustado. Hay veces que no nos damos cuenta de las opciones escondidas que traen algunos plugins o themes, vamos a aprovecharlo.

 

Esta es la configuración de la pestaña Page Hero

generatepress parallax

 

Este es el snippet de código que he usado:

<div class="grid-container" style="padding-left: 0; padding-right: 0; max-width: inherit;">
<div class="hide-on-desktop tablet-grid-100 mobile-grid-100">
<h1>Efecto Parallax</h1>
</div>
<div class="grid-100 hide-on-mobile hide-on-tablet" style="padding: 0;">
<h1 style="margin-bottom: -5%;">Efecto Parallax</h1>
<img style="margin-bottom: -7px;" src="https://webdepruebas.local/wp-content/uploads/fabrizio-conti-559920-unsplash.png" />
</div>
</div>

El segundo

Una imagen pequeña y un texto encima de un fondo full width. Se consigue un efecto casi de tres dimensiones al conseguir los dos movimientos de las imágenes. La verdad que se queda chulo.

La configuración de la pestaña page hero.

generatepress parallax

Y el código, utilizando dos columnas y quitando la imagen parallax en móvil, para ayudar a la velocidad de carga.

<div style="max-width: inherit;" class="grid-container">
<div class="hide-on-desktop tablet-grid-100 mobile-grid-100">
<h1>Efecto Parallax</h1>
<p style="text-align: left; font-size: 18px;"> Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro.
</p>
</div>
<div style="padding-left: 5%;" class="grid-50 hide-on-mobile hide-on-tablet">
<h1 style="">Efecto Parallax</h1>
<p style="text-align: left; font-size: 18px;"> Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro.
</p>
</div>
<div class="grid-50 hide-on-mobile hide-on-tablet">
<img style="margin-bottom: -7px;" src="https://webdepruebas.local/wp-content/uploads/dmf.es-avatar-2018-3.png">
</div>
</div>

Como ves el efecto parallax es resultón sobre todo en modo desktop en móvil no lo es tanto además de que la carga es más lenta. GeneratePress es un theme bastante ligero y con muchas posibilidades, la verdad me encanta.

Si hay algún error puedes decírmelo en el formulario que hay ahí abajo. Y si lo quieres modificar adelante para eso está.

¿Te gustaría hacerme alguna pregunta?

Contacto