Cómo crear un efecto antes y despues en fotografias

Efecto antes y después en fotografías

En este artículo vamos a ver un efecto bastante interesante en WordPress, un efecto antes y despues en fotografias bastante llamativo y curioso.

Seguramente has visto más de una vez alguna web que tenía este tipo de imágenes donde se mostraba un antes y un después, ya sea para mostrar cómo ha cambiado una persona o, por ejemplo, el antes y el después de la restauración de un cuadro, de un hotel, etc.

En definitiva, este efecto es muy útil para comparar dos imágenes muy parecidas que varían muy poco y así poder ver la diferencia que hay entre ellas.

Por ejemplo, para saber cómo verá la misma imagen una persona con visión borrosa y otra sin problemas de visión.

efecto antes y despues en fotografias

El funcionamiento del efecto antes y despues en fotografias en WordPress

 El funcionamiento de este tipo de efectos es bastante simple, son dos imágenes superpuestas que, mediante un slide o deslizador, se descubre una u otra dependiendo del arrastre del mismo. La sensación es como si se mezclasen las dos imágenes, pero en realidad siempre están las dos ahí solo que a medida que se descubre una se va ocultando la otra.

Como he dicho antes, este efecto puede venir bien a un estudio de retoque fotográfico en el que se puede apreciar cómo ha quedado una foto antigua antes y después de su restauración, para la web de un hotel e incluso para empresas de construcción, en el que fuera posible comparar la obra desde sus cimientos hasta el resultado final.

Antes y despues en imagenes

TwentyTwenty es el plugin que consigue hacer esto

Este llamativo efecto se consigue con el plugin TwentyTwenty, es un proceso realmente simple que no necesita ninguna configuración para llevarlo a cabo. Una vez que te lo has descargado y activado, ya puedes empezar a utilizarlo.

Cómo funciona

Una vez que hayas descargado y activado el plugin creas una página o una entrada para insertar el antes y después. Después debes subir (desde el cargador de medios) las dos imágenes que harán el efecto.

En este ejemplo vamos a mostrar cómo vería el mundo una persona con problemas de visión borrosa y cómo se vería en realidad.

vision borrosa antes
Efecto visión borrosa antes
vision borrosa despues
Efecto visión borrosa después

Una vez en ella tenemos que insertar las dos imágenes (el antes y el después) en la zona del contenido.
Nota: recuerda que las dos imágenes tienen que tener el mismo tamaño en largo y ancho.

Insertar las dos fotografias

Una vez insertadas las dos imágenes, tenemos que añadir un shortcode, este shortcode será identificado por el plugin que insertará el efecto que queremos conseguir. Ese shortcode es este:

[twentytwenty]

Ese el shortcode es el de apertura del efecto, por lo que deberemos añadirlo antes de la primera imagen, y después de la segunda imagen debemos añadir el shortcode de cierre:

[/twentytwenty]

Insertar el shortcode

Muy importante

Al instalar el plugin no se veráningún cambio en el Escritorio, ya que no inserta ningún CPT (Custom Post Type), pero cuando publiquemos la entrada o la página y podremos observar el funcionamiento del plugin con las dos imágenes subidas anteriormente.

Ver el efecto antes y despues en fotografias

 

Debemos  tener en cuenta que el la primera imagen insertada será estado antes para  este efecto, y la segunda imagen será el estado después.

 

Efecto antes
Efecto en el estado ANTES
Efecto despues
Efecto en el estado DESPUES

Conlusión

Así de fácil y simple es insertar un efecto antes y despues en fotografias en WordPress, solo hay que subir dos imágenes, insertarlas en el contenido de la entrada o la página, añadir los shortcodes antes y después de las imágenes, publicar el contenido y disfrutar del efecto.

¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

Deja un comentario

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de este sitio. *