ScrollMagic: Un plugin jQuery para interactuar con el scroll

ScrollMagic presenta una nueva alternativa para lograr una correcta interacción entre la barra de desplazamiento del navegador y los elementos de un sitio web, lanzando animaciones o efectos según la ubicación del scroll.

Esta herramienta permite realizar otras tareas adicionales como por ejemplo: iniciar una animación según la posición del scroll, sincronizar los eventos según el movimiento realizado por el usuario, pegar elementos a determinadas ubicaciones, incorporar efectos parallax fácilmente, y como si todo esto fuese poco, cargar contenido mediante Ajax logrando lo que comúnmente conocemos como scroll infinito.

Si hablamos de compatibilidad con los distintos navegadores este plugin brinda soporte para: Firefox 26+, Chrome 30+, Safari 6+, Opera 19+ e Internet Explorer 9+.

Ejemplo de uso:

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

// assign handler "scene" and add it to Controller
var scene = new ScrollScene({duration: 100})
                .addTo(controller);

// add multiple scenes at once
var scene2;
controller.add([
    scene, // add above defined scene
    scene2 = new ScrollScene({duration: 200}), // add scene and assign handler "scene2"
    new ScrollScene({offset: 20}) // add anonymous scene
]);

Como siempre, les recomiendo visitar la documentación oficial y si gustan ver este plugin en acción pueden visitar la demostración online.

Web: ScrollMagic

Pablo: Programador desde hace más de 11 años, adicto a internet, cafeinómano, fanático de la información, intento de emprendedor, trabaja de forma compulsiva solo en lo que ama. Sueña con tener una aplicación con más de 1 millón de usuarios.
Entradas relacionadas