Espectaculares efectos interactivos con el Scroll de una página. Descárgalos !!!

por Omar Benyakhlef | Descargas, Diseño Web

Las animaciones a través del movimiento del scroll de una página, son en mi opinión, una de las herramientas que mejor nos permiten llamar la atención del usuario.

Utilizando estos efectos, podemos hacer todo tipo de animaciones, desde las más complejas, hasta movimientos de lo más discretos, todo siempre dependiendo del producto que tengamos que vender. En cualquier caso, los efectos interactivos con el scroll, lo que nos permiten como usuario, es tener un control sobre la página del que rara vez solemos disfrutar. Los contenidos no se muestran sin más,  gracias a esa interactividad con la profundidad del scroll, podemos controlar la aparición de contenidos, imágenes o animaciones cuando nosotros queramos, incluso echar hacia atrás para ver cómo se ha producido ese efecto.

Esa interacción también promueve la viralización de nuestras páginas, por lo que, como he dicho al principio, siempre teniendo en cuenta el tipo de producto que estamos vendiendo, recomiendo 100% el uso de estas interactividades, al usuario le va a agradar y a nosotros nos permite desarrollar algo más nuestra creatividad.

EJEMPLOS

MAKE YOUR MONEY MATTER.

Una impresionante web en el que se cuenta el funcionamiento de un producto a través de una historia.
VER EJEMPLO

EVERY LAST DROP

Otro producto vendido a través de una historia bien ilustrada, otro claro caso de cómo la información va a ser mejor aceptada por el usuario y como decía al principio del artículo, muchas probabilidades de que sea compartida tu página.
VER EJEMPLO

PORSCHE EVOLUTION

En este caso podemos ver cómo ha solucionado Porsche su web para mostrar la evolución de sus vehículos a lo largo de los años y de la música, todo con un efecto parallax activado por el scroll.
VER EJEMPLO

PEUGEOT HYBRID

Si además eres capaz de mostrar tu información con ilustraciones como estas, el éxito está asegurado…
VER EJEMPLO

CLOSER

Esta web la puedes navegar como cualquier otra, a través de su menú, o la puedes recorrer entera haciendo scroll. Todo tipo de animaciones para tomar ideas.
VER EJEMPLO

COLOR OF THE YEAR

Una web muy visual. A través del color y de tipografías que van cambiando según profundizamos en el scroll.
VER EJEMPLO

MELANIE DAVEID

Lo interesante de esta web es observar cómo los contenidos están divididos en dos columnas y cómo una columna espera a la segunda para seguir mostrando contenido, todo ello por supuesto con la ayuda del scroll.
VER EJEMPLO

BAGIGIA

Esta web es antigua, pero la coloco en este listado, para mostrar cómo a través del scroll van cargando distintas imágenes para recrear una animación de un objeto, dando una sensación 3D
VER EJEMPLO

DESCARGAR CÓDIGO

Una de las mejores galerías, podéis ver todos los efectos posibles en http://scrollmagic.io/examples/index.html

Todo tipo de efectos con textos

Una librería tanto para web y móvil. Permite establecer un easing personalizado, rotaciones 3D, …

Librería  JS con timelines para generar animaciones mucho más suaves.

Animaciones para transformaciones de escala, rotaciones, animaciones 3D,…

Compatible con cualquier tipo de dispositivo, y perfecto para hacer una demostración de un producto realizando un 360 grados cuando el usuario hace scroll.

Pasa con el scroll de sección en sección con diversos tipos de animaciones

He colocado esta galería porque además de ser un menú muy vistoso y útil, nos muestra cómo van cambiando los puntos según avanzamos en el scroll

Detecta la dirección del scroll mostrando una capa arriba o abajo.

Muy interesante, permite el desplazamiento desigual entre columnas al hacer scroll.