on:2014年3月10日sponsorsスクロールに合わせて、さまざまなアニメーションをシンクロさせるjQueryのプラグインを紹介します。Appleのプロダクトページのように次々に要素を表示したり、簡単にパララックスを加えたり、特定の要素をスクロール時にピンで留めて表示したりなど、スクロール系のエフェクトは全部できてしまう感じです。スマフォなどレスポンシブ対応はもちろん、水平スクロール、無限スクロール、div要素の内側のスクロールなどにも対応しています。-GitHubScrollMagicのデモScrollMagicの使い方ScrollMagicのデモまずは、基本となるデモの一通りの動きをアニメーションgifにしてみました。デモのアニメーションgif実際の動きは、下記ページでゆっくりお楽しみください。デモページデモは他にもたくさんあります。スクリプトのベーシックな動きを楽しめる「Basic」から。「Advanced」では、より実用的な面白いデモが揃っています。最後の「Expert」では、より高度なデモが豊富に揃っています。Destroyingなど。外部ファイルjquery.jsと当スクリプトをhead内に記述します。JavaScript基本となるスクリプトは、下記のようになります。実装時には各デモごとにコードが掲載されているので、それを参考にしてください。