ITエンジニア/デザイナ向けにオープンソースを毎日紹介

シングルページアプリケーションの人気もあって、スクロールアニメーションが流行っています。しかしスクラッチで組むとなるとスクロールイベントの感知やアニメーションの制御など非常に難しいでしょう。

そこで使ってみたいのが専用のライブラリです。今回は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

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2