Idea inicial

La empresa Bhoga dedicada a la nueva tendencia del «home staging» necesitaba una web de proyectos de interiorismo. Quería mostrar en qué situación estaba el inmueble antes y como queda después de su actuación.De esta manera se podría ir enseñando sus proyectos realizados e ir captando nuevos clientes.

Conceptualización

Se pensó en mostrar a la vez la imagen del antes y el después de la actuación tomando la fotografía desde el mismo punto o similar.

Básicamente es mostrar dos imágenes que deben tener exactamente el mismo tamaño, una representa el ‘antes’ y la segunda representa el ‘después’. Se aplica un enmascaramiento para que al desplazar el ratón se muestra una imagen u otra.

Técnicamente se realiza al superponer una imagen sobre la otra y mediante jquery al mover un manejador en el eje horizontal ir actualizando el estilo css en línea de la imagen un recorte de la misma. Ejemplo: img style=’clip: rect(0px, 273px, 364px, 0px);’

Resultado

De esta manera se reproduce perfectamente el trabajo realizado en la restauración, adecuación y trabajos de interiorismo realizados por Bhoga. No hace falta explicaciones sobre cambios puntuales de cuadros, lámparas o demás enseres. Mediante este efecto el posible futuro cliente ve como ha mejorado la casa con los cambios realizados. Bhoga así tiene una sección en su web de proyectos de interiorismo para mostrar en qué situación estaba el inmueble antes y como queda después de su actuación, dejando claro el pricipal valor de la empresa.

Más proyectos de Tanit.

Moviendo la barra vertical horizontalmanete nos dejará ver la diferencia entre las distintas fotos. Abajo se muestra la totalidad de la segunda imagen.