Efecto Parallax

parallaxParallax es el desplazamiento o diferencia aparente en la posición de un objeto visto desde 2 puntos de vista diferentes y se mide por el ángulo o semi-ángulo de inclinación entre los dos puntos de vista. El término viene del griego parallaxis que significa alteración, los objetos más cercanos tienen un parallax más alto que los que se sitúan a mayor distancia cuando se observan desde 2 posiciones diferentes. Los astrónomos utilizan este efecto para medir las distancias a las estrellas.

Parallax es también un villano (un bicho bastante feo por cierto que se define como “a demonic looking parasitic cosmic entity”) que debutó en el número 50 de Green Lantern de DC Comics y Parallax se llamó al efecto que se introdujo en el sistema operativo de Apple iOS7 que hacía que el fondo de la pantalla pareciese moverse a velocidad distinta que el contenido, creando un ligero efecto de profundidad, el fondo de la pantalla parece que sigue nuestra mirada.

El diseño de la interfaz de usuario (UI User Interface o UX User Experience) de este iOS7 se realizó por medio de capas lo que permitió que cuando se mueve el dispositivo móvil se pueda mover no solo el wallpaper o background sino también otros elementos de la pantalla provocando un cierto efecto sutil de 3D o una ligera tridimensionalidad.

Aplicado el efecto parallax al diseño web o diseño de interfaces experimentales, ciertamente que se consigue algo muy dinámico, moderno y agradable si se hace con gusto y moderación, el movimiento se realiza con una leve fricción, aceleración o efecto easing que provoca una sensación de inmersión en el contenido muy novedosa y una secuencia narrativa con nuevas y creativas posibilidades.

Sin embargo este efecto es tan antiguo y conocido como la propia historia de la civilización y más recientemente desde que existe la animación, Walt Disney ya investigó y utilizó esta técnica en los años 40 como se puede observar en este didáctico vídeo:

Actualmente el “Efecto Parallax” se ha trasladado a multitud de interfaces de diseño web como se puede ver en estos ejemplos:

http://www.culturalsolutions.co.uk/

http://www.numero10.ch/fr/home/

http://graphicnovel-hybrid4.peugeot.com/start.html

http://matthew.wagerfield.com/parallax/

http://www.teapot-creation.com/

http://boy-coy.com/

http://hotdot.pro/en/

http://journey.lifeofpimovie.com/#!/richard-parker

http://f6design.com/projects/parallax-scrolling/

http://www.madwell.com/

http://www.iutopi.com/

http://uk.rimmellondon.com/

http://benthebodyguard.com/index.php

http://www.netlash-bseen.be/

http://www.latabladegisela.com/

http://www.egopop.net/index.html

http://janploch.de/

http://unfold.no/

Deja un comentario