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.

scroll y jquery

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

Categorizado en: