"El diseño es el embajador silencioso de tu marca"
- Paul Brand

Animación de scroll horizontal

Hoy vamos a realizar una animación de scroll horizontal que últimamente se ve bastante.

No sé si el título de esta entrada está muy bien escogido, pero no se me ocurre nada mejor, intentaré que la explicación sea mas aclaradora.

Dentro de las muchas librerías para hacer animaciones en una página web tenemos una enfocada totalmente a hacer efectos basados en el scroll.

Es decir, que según la posición del scroll podamos definir ciertas propiedades sobre elementos de la web, como podrían ser la posición, el tamaño, el color y otros por el estilo.

Esta magnifica librería se llama scrollmagic, yo la uso bastante y aunque no sea la más sencilla de aprender, se pueden hacer muchas cosas visualmente impactantes con ella.

Si quieres saber más puedes ir a su página oficial, tienen un montón de ejemplos y una buena documentación…

Pero no voy a extenderme en como se usa o que cosas se pueden hacer, como decía voy a centrarme en una animación que está bastante de moda, la de emular scroll horizontal en una página vertical.

Grandes gigantes de internet como la página de zara.com están usando este efecto al menos en la actualidad de forma habitual.

Por ejemplo si entramos a la parte más «creativa» de esta web que es la de sus historias o editoriales veremos que hay un montón de ellas que lo usan.

Aquí tenéis la captura.

 

 

Con la imagen se ve claro cual es el efecto.

Básicamente tu scroll sigue siendo vertical y de hecho puedes controlarlo con la rueda del ratón como cualquier otra página. Sin embargo al hacer scroll el movimiento que se produce es horizontal.

No es la animación más impactante del mundo, pero es curioso y no satura, a mi por lo menos me gusta.

¿Cómo se hace?

Aunque si tratas de inspeccionar el código te va a resultar difícil saber como lo han hecho porque lo han servido todo empaquetado, la explicación es muy sencilla.

Esta claro que vas a usar scrollmagic, de manera que necesitas descargarla e importarla, después solo es trabajar con ella, os dejo aquí el código para que probéis…

 

See the Pen Horizontal Scroll with GSAP and ScrollMagic by Óscar Lijó (@oscarlijo) on CodePen.

The following two tabs change content below.
Especialista en diseño web responsive, programador html5, css3, jquery, php y java.

Latest posts by Óscar Lijó (see all)