シングルページアプリケーションの人気もあって、スクロールアニメーションが流行っています。しかしスクラッチで組むとなるとスクロールイベントの感知やアニメーションの制御など非常に難しいでしょう。 そこで使ってみたいのが専用のライブラリです。今回はjQueryプラグインのScrollMagicを紹介します。

ScrollMagicのデモ

何はともあれまずは動画をご覧ください。

キーボードの上下キーでスクロールしていますが、滑らかの多種多様なアニメーションが実行されているのが分かります。

ScrollMagicの使い方

JavaScriptのコードは次のようになります。

// 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
]);

offsetで高さを変更するイメージですね。シーン毎の作り込みは必要ですが、すっきりとしたコードになるかと思います。

対応ブラウザはFirefox 26+、Chrome 30+、Safari 6+、Opera 19+、IE 9+となっています。

ScrollMagicはjQuery/JavaScript製のオープンソース・ソフトウェア（GPL/MIT License）です。

ScrollMagic - The jQuery plugin for magical scroll interactions. janpaepke/ScrollMagic