¿QUE ES PARALLAX?
![Graphic showing parallax style layering.](https://www.unleashed-technologies.com/sites/default/files/blogposts/parallax-1.png)
De esta misma manera puede aplicarse esta misma técnica para el diseño de sitios web, donde el fondo del sitio, o el sitio en general, posee un fondo que se mueve a diferente velocidad que las otras capas mas externas, que en este caso, bien podría ser la información relevante para el tema, imágenes, vídeos e incluso diversas animaciones. Esta técnica representa una importante herramienta par múltiples aplicaciones creativas y que hoy en dia, representa una tendencia en el desarrollo web al ser un elemento muy vistoso y llamativo.
![Resultado de imagen para parallax](https://s3.envato.com/files/199730351/00_preview-dex.jpg)
De forma personal, si ustedes quieren ver este efecto por ustedes mismo, nosotros como editores de este blog, recomendamos visitar el sitio de "The Boat" para que puedan vivir una experiencia bastante creativa y original en cuanto al uso del parallax.
![Resultado de imagen para the boat](https://www.sbs.com.au/theboat/images/fb-image.jpg)
La técnica de parallax funciona de la manera siguiente. Se toman dos puntos de vista diferentes A y B que representan los ojos de una persona. Estos miran hacia la pantalla donde se encuentra la imagen, sin embargo, antes de que los ojos puedan tener una imagen del fondo de la pantalla, hay un objeto que se encuentra en medio de estos dos, por lo que, mientras los ojos observan este objeto de forma mas detenida, el objeto del fondo sale del foco y forma parte nada mas de la decoración de este objeto que los ojos observan, lo que da el sentimiento de profundidad.
![Imagen relacionada](https://www.1and1.ca/digitalguide/fileadmin/DigitalGuide/Screenshots/EN-parallax.png)
Como hemos dicho en reiteradas ocasiones, para realizar el efecto parallax es necesario poseer varias imágenes distribuidas en capas, una tras otra, y al final una imagen que represente el fondo de toda la animación. Un ejemplo mas claro es el que se presenta a continuación, el cual esta en HTML:
![Resultado de imagen para parallax codigo](https://www.hosteurope.es/blog/wp-content/uploads/2014/09/CODIGO2.png)
Cada uno de los módulos representa una imagen diferente para simular la profundidad.
Video: ¿Que es Parallax?
Comentarios
Publicar un comentario