Seguro que lo has visto en algún sitio: vas haciendo scroll, y el texto, imagen o cualquier otra cosa que haya en primer plano se mueve a una velocidad distinta que el fondo: eso es el efecto parallax, y de unos años acá parece estar más o menos de moda.

Si te preguntas cómo implementar ese efecto parallax en tu web WordPress has llegado al sitio adecuado: vamos a ver varias formas de hacerlo, usando para el fondo tanto imágenes como vídeo.

Efecto parallax

No es necesario que entre muy en detalle acerca de en qué consiste este efecto parallax porque seguro que lo has visto alguna vez. Pero sí quiero hacer una advertencia inicial: como cualquier elemento de diseño “efectista” puede tener dos consecuencias:

• Puede restar usabilidad y eficiencia a la web. Por ejemplo, puede dificultar la lectura del texto, aumentar los tiempos de carga, etcétera.
• Si se abusa de él, cansa. Y muy rápido.

La moraleja es: úsalo sabiamente. Puedes utilizarlo para destacar una parte del contenido, especialmente en la página de inicio, en una landing page o en la página de quiénes somos. Incluso puedes usarlo como imagen de cabecera de las entradas del blog si está muy justificado, por ejemplo en un blog sobre fotografía o algún otro tema donde la imagen sea el tema central o tenga gran relevancia. Pero no abuses de él.

Efecto parallax en tu plantilla

Muchas plantillas premium para WordPress incluyen ya secciones (habitualmente dentro de la home) con efecto parallax. Incluso he llegado a ver alguna plantilla gratuita que lo implementa (como, por ejemplo, AccessPress Parallax). Pero lo cierto es que puedes añadirlo donde quieras y a la plantilla que quieras.

De hecho, hay varias formas de hacerlo. Si eres amigo de los diseñadores visuales (los page builders) ya sabes que puedes hacerlo con el que uses, pero si no los utilizas habitualmente no necesitas instalar uno en tu web para conseguir un efecto paralax.

Vamos a ver cómo hacerlo de dos formas: con un plugin, si eres de los que busca algo fácil, rápido y sin complicaciones, y con CSS, y eres de los que les gusta mantener el control.

Añadir efecto parallax a tu web con un plugin

He dicho fácil, rápido y sin complicaciones, y de verdad no he exagerado ni lo más mínimo, como vas a ver a continuación. Porque implementar un efecto parallax en tu plantilla es tan sencillo como instalar el plugin Advanced WordPress Backgrounds.

Una vez activado tendrás disponible un nuevo botón en el editor visual de WordPress:

Usándolo podrás insertar fácilmente un fondo parallax en cualquier contenido de tu plantilla, ya sea página, entrada, producto… Al pulsarlo, te mostrará una pantalla de opciones en la que podrás personalizar la sección con el efecto parallax, que una vez configurada te insertará un shortcode similar a éste:

[nk_awb awb_type="image" awb_stretch="true" awb_color="rgba(255,255,255,0.55)" awb_image="291" awb_image_size="full" awb_parallax="scroll-opacity" awb_parallax_speed="0.5" awb_mouse_parallax="true" awb_mouse_parallax_size="30" awb_mouse_parallax_speed="10000" awb_styles=" padding-top: 50px; padding-bottom: 35px;"]

Your Content Here

[/nk_awb]

Como es lógico, todo el contenido que añadas en Your Content Here será el que quede dentro del parallax. La configuración es bastante sencilla. Simplemente tienes que elegir qué tipo de fondo vas a usar (color, imagen, vídeo en YouTube o Vimeo, vídeo local) establecer algunos ajustes.

Las opciones son sencillas y autoexplicativas. Sí merece la pena mencionar la opción Stretch (si la marcas el efecto parallax abarcará todo el ancho de la pantalla, si no sólo el ancho asignado al contenido) y que prestes atención al Padding en la pestaña Styles, para que el contenido no quede pegado al borde de la imagen.

Pero lo mejor es ver un vídeo con todas las opciones. Así de paso ves lo sencillo que es y te comento un par de truquitos:

Efecto parallax en cualquier web con CSS

La segunda opción es implementarlo con un poco de HTML y CSS. Es bastante sencillo (y te doy el código necesario) aunque tendrás que saber un mínimo de CSS para, quizá, adaptarlo al diseño de tu plantilla en cuanto a espacios o posición.

Para ello vamos a utilizar dos contenedores, así que el HTML es tan sencillo como:

 
Aquí va el contenido
 

Ya ves que hasta ahora no hay complicación ninguna. Eso tendrás que ponerlo en el editor de WordPress, donde quieras insertar el parallax. Recuerda que el editor debe estar en modo HTML, porque si tienes la pestaña Visual activa te cambiará los < por &lt; y los > por &gt;

El CSS necesario puedes añadirlo, si no tienes un plugin específico para ello, en Apariencia > Personalizar > CSS adicional, y es el siguiente:

.parallax {  
	background-image:url('http://tuweb.com/wp-content/uploads/2017/08/imagen-de-fondo.jpg');
	height:100%; 
	background-attachment:fixed;
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	margin-left:-410px;
	margin-right:-410px;
}
 
.contenido-parallax { 
	width:50%;
	margin:0 auto;
	color:#FFF;
	padding-top:50px; 
	padding-bottom:35px;
}

Por supuesto, deberás subir previamente la imagen de fondo a tu biblioteca de medios y cambiar la ruta al archivo en la directiva background-image.

Como ves, el resultado conseguido así es más limitado: la imagen de fondo se mantiene fija, sin desplazamiento (background-attachment:fixed), no hay overlay, no hay respuesta al movimiento del ratón, etcétera. Por supuesto todo eso se puede ir añadiendo, complicando el CSS tanto como quieras. Con apenas quince directivas que hemos utilizado no se puede pedir más.