parallax scrolling
TRANSCRIPT
![Page 1: Parallax scrolling](https://reader034.vdocuments.pub/reader034/viewer/2022042610/58a154571a28abbe3c8b59cf/html5/thumbnails/1.jpg)
“La técnica desconocida”
PARALLAX SCROLLING
![Page 2: Parallax scrolling](https://reader034.vdocuments.pub/reader034/viewer/2022042610/58a154571a28abbe3c8b59cf/html5/thumbnails/2.jpg)
¿PARALLAX?• El “parallax scrolling” es una técnica especial de scroll para gráficos computerizados.
Consiste en el movimiento a diferentes velocidades de 2 capas de imagen, la superior y la de fondo.
• Básicamente la imagen de fondo se mueve a inferior velocidad que la superior, creando una falsa apariencia de profundidad y tridimensionalidad.
• Esta técnica se lleva utilizando desde 1940 en la animación tradicional, y se popularizó en los 80 con el juego arcade “Moon Patrol”.
• Si bien es cierto, como acabamos de decir, que la técnica ya se conocía hace más de 70 años, en la actualidad es un proceso bastante nuevo el terreno del “diseño web”, y se está poniendo bastante de moda en el mundillo.
![Page 3: Parallax scrolling](https://reader034.vdocuments.pub/reader034/viewer/2022042610/58a154571a28abbe3c8b59cf/html5/thumbnails/3.jpg)
DESCRIPCION GRAFÍCA
![Page 4: Parallax scrolling](https://reader034.vdocuments.pub/reader034/viewer/2022042610/58a154571a28abbe3c8b59cf/html5/thumbnails/4.jpg)
EJEMPLOS• El parallax es similar al gif tenemos:
• Fondo: Elemento1: Elemento2:
![Page 5: Parallax scrolling](https://reader034.vdocuments.pub/reader034/viewer/2022042610/58a154571a28abbe3c8b59cf/html5/thumbnails/5.jpg)
EJEMPLOS:• El resultado final al combinar capas es:
![Page 6: Parallax scrolling](https://reader034.vdocuments.pub/reader034/viewer/2022042610/58a154571a28abbe3c8b59cf/html5/thumbnails/6.jpg)
EJEMPLOS:• Paginas diseñadas con parallax:
• http://www.loisjeans.com/web2012/es
• http://journey.lifeofpimovie.com/#!/
• http://boy-coy.com/
• http://www.puma.com/mobium/
• http://www.cabletv.com/the-walking-dead