[JS]これスゴイよ！スクロール時にさまざまな楽しいエフェクトを与えるスクリプト -ScrollMagic
Post on:2014年3月10日
sponsors
スクロールに合わせて、さまざまなアニメーションをシンクロさせるjQueryのプラグインを紹介します。
Appleのプロダクトページのように次々に要素を表示したり、簡単にパララックスを加えたり、特定の要素をスクロール時にピンで留めて表示したりなど、スクロール系のエフェクトは全部できてしまう感じです。
スマフォなどレスポンシブ対応はもちろん、水平スクロール、無限スクロール、div要素の内側のスクロールなどにも対応しています。
ScrollMagic
ScrollMagic -GitHub
ScrollMagicのデモ
まずは、基本となるデモの一通りの動きをアニメーションgifにしてみました。
かなり急ぎ足です。
デモのアニメーションgif
実際の動きは、下記ページでゆっくりお楽しみください。
Chrome, Safari, Firefox, Opera, IEは9+でどうぞ。
デモは他にもたくさんあります。
まずは、スクリプトのベーシックな動きを楽しめる「Basic」から。
他にも、Pinning, Horizontal, Custom Actionなど。
「Advanced」では、より実用的な面白いデモが揃っています。
Demo Advanced: Advanced Tweening
他にも、Custom Containers, Mobile Support, Anchor Link Scrolling, Parallax Scrollなど。
最後の「Expert」では、より高度なデモが豊富に揃っています。
他にも、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
]);
sponsors
