[JS]これスゴイよ!スクロール時にさまざまな楽しいエフェクトを与えるスクリプト -ScrollMagic

スクロールに合わせて、さまざまなアニメーションをシンクロさせるjQueryのプラグインを紹介します。

Appleのプロダクトページのように次々に要素を表示したり、簡単にパララックスを加えたり、特定の要素をスクロール時にピンで留めて表示したりなど、スクロール系のエフェクトは全部できてしまう感じです。
スマフォなどレスポンシブ対応はもちろん、水平スクロール、無限スクロール、div要素の内側のスクロールなどにも対応しています。

デモのキャプチャ

ScrollMagic
ScrollMagic -GitHub

ScrollMagicのデモ

まずは、基本となるデモの一通りの動きをアニメーションgifにしてみました。
かなり急ぎ足です。

デモのアニメーション

デモのアニメーションgif

実際の動きは、下記ページでゆっくりお楽しみください。
Chrome, Safari, Firefox, Opera, IEは9+でどうぞ。

デモのキャプチャ

デモページ

デモは他にもたくさんあります。
まずは、スクリプトのベーシックな動きを楽しめる「Basic」から。

デモのキャプチャ

Demo Basic: Simple Tweening

他にも、Pinning, Horizontal, Custom Actionなど。

「Advanced」では、より実用的な面白いデモが揃っています。

デモのキャプチャ

Demo Advanced: Advanced Tweening

他にも、Custom Containers, Mobile Support, Anchor Link Scrolling, Parallax Scrollなど。

最後の「Expert」では、より高度なデモが豊富に揃っています。

デモのキャプチャ

Demo Expert: Cascading Pins

他にも、Responsive Duration, Mobile Support Advanced, Removing and Destroyingなど。

ScrollMagicの使い方

Step 1: 外部ファイル

jquery.jsと当スクリプトをhead内に記述します。

<head>
  ...
  <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="js/jquery.scrollmagic.js"></script>
</head>

Step 2: 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
]);

top of page

©2017 coliss