ScrollMagic: Diseño Web divertido

En el diseño web una tendencia es como el estilo que ha sido adoptado para la realización de los sitios el cual es fuertemente aceptado por los usuarios, usualmente en periodos temporales. Parte de las tendencias en lo que va de 2016 y, aparentemente, seguirá marcando la pauta en 2017, son las animaciones y las secciones largas con mucho scroll.

No es un secreto que este estilo es bastante atractivo y divertido para el usuario, con las animaciones podemos hacer que su navegabilidad por el sitio sea intuitiva y entretenida siempre que sean bien utilizadas. Por este motivo hemos creado un tutorial para incluir en tu sitio web desplazamientos animados, utilizando el plugin de jQuery ScrollMagic.

ScrollMagic: Diseño Web divertido

ScrollMagic es una librería realizada en javascript para lograr interacciones en el desplazamiento de los sitios web. Es una reescritura completa de su predecesor Superscrollorama y su arquitectura está basada en complementos que ofrecen fácil personalización y extensibilidad.

Es ideal si queremos implementar algunas de las siguientes cosas:

• Animación basada en la posición o desplazamiento del sitio.
• Desencadenar la animación o sincronizarlo con el movimiento del scroll.
• Añadir efecto parallax sin mucho esfuerzo.
• Crear una página con scroll infinito, manejando carga de contenido con ajax.

Características de ScrollMagic

• Rendimiento optimizado, es ligero, flexible y permite extensibilidad.
• Maneja gestión de eventos y programación orientada a objetos.
• Soporta el diseño web adaptativo.
• Tiene soporte para desplazamientos en ambos sentidos (horizontal y vertical)
• Tiene soporte para desplazamientos dentro de los contenedores (div), incluso múltiples en una sola página.
• Funciona perfectamente para los navegadores: Firefox 26+, Chrome 30+, Safari 5.1+, Opera 10+, IE 9+.
• En su repositorio GitHub, posee documentación detallada y muchos ejemplos de aplicación.

Obtener ScrollMagic

Está disponible para obtenerlo de diversas maneras.

1: GitHub

2: Bower

3: node package manager

4: CDN

También puedes leer Cómo personalizar el diseño de un correo en Outlook

Instalación y uso

La instalación es bastante sencilla, solo incluimos el archivo del núcleo a los archivos html donde queremos usarlo.

Para su uso, el plugin provee un patrón de diseño orientado a un controlador, al cual se le agregan una o más escenas. Dichas escenas se utilizan para definir lo que ocurre en los contenedores cuando se desplazan a un punto específico.

Este sería un ejemplo básico:

// init controller
var controller = new ScrollMagic.Controller();

// create a scene
new ScrollMagic.Scene({
duration: 100, // the scene should last for a scroll distance of 100px
offset: 50 // start this scene after scrolling for 50px
})
.setPin("#my-sticky-element") // pins the element for the the scene’s duration
.addTo(controller); // assign the scene to the controller

Un ejemplo más avanzado sería, lograr múltiples desplazamientos, su código fuente sería:

$(function () { // wait for document ready
// init controller
var controller = new ScrollMagic.Controller();

// build tween
var tween = TweenMax.to("#animate", 0.5, {scale: 3, ease: Linear.easeNone});

// build scene
var scene = new ScrollMagic.Scene({triggerElement: "#multiDirect", duration: 400, offset: 250})
.setTween(tween)
.setPin("#animate")
.addIndicators({name: "resize"}) // add indicators (requires plugin)
.addTo(controller);

// init controller horizontal
var controller_h = new ScrollMagic.Controller({vertical: false});

// build tween horizontal
var tween_h = TweenMax.to("#animate", 0.5, {rotation: 360, ease: Linear.easeNone});

// build scene
var scene_h = new ScrollMagic.Scene({duration: 700})
.setTween(tween_h)
.setPin("#animate")
.addIndicators({name: "rotate"}) // add indicators (requires plugin)
.addTo(controller_h);
});

Puedes encontrar muchos más ejemplos con su código fuente en la documentación del plugin.