/GeneratePress snippets
Efecto parallax con imágenes

Hay que tener en cuenta que este efecto 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 uso en mis páginas, prefiero más la carga rápida sobretodo para móviles.

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.

 

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 es una imagen pequeña y un texto encima de un fondo full width.

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>

Eso es todo si queréis incluir alguna modificación, o corregirme ya sabéis que para eso están los comentarios.