2015.08.29 [土] ScrollMagicを調べた。
夏休みも終盤になり、もうすぐ9月ですね。一時期の死んじゃうような暑さも和らぎ、台風が頻繁に発生していますので、この時期を過ぎれば、本格的な秋がやっています。実りの秋ですので、様々な学校行事とともに、前期から進めていたプロジェクトの完成時期にもなりますので、どんな制作物が完成するのか楽しみです。
さて、そのプロジェクト絡みでScrollMagicを調べましたので、簡単な使い方だけでも紹介したいと思います。
セットアップ
2.0.5にバージョンが上がり、読み込むファイルなども変更になりました。まずはベースとなるhtmlを用意します。
これに必要なファイルを読み込ませていきます。まずは、ScrollMagicのメインjsとデバッグ用のdebug.addIndicators.jsを入れます。トリガーの位置などが表示されますので制作時に便利です。
CSSでスクロールされるように高さを設定し、対象となる要素を中央に持ってきて、わかりやすく色をいれます。
body{
height: 2000px;
}
.element{
width: 150px;
height: 150px;
text-align: center;
line-height: 150px;
}
#element{
margin: 300px auto;
background-color: #0FF;
}
とりあえず、これで準備ができました。この対象となる要素（#element1）がスクロールバーのどこからどこまでの間に、止まったり、アニメーションしたりするなどの処理をさせるのがScrollmagicの主な役割です。
ScrollMagicの基本
まずはコントローラーを作ります。
var controller = new ScrollMagic.Controller();
続いて、シーンを作ります。そのシーンが影響するスクロールバーの位置を設定します。offsetでスタート位置（300px）、durationで終了距離（800px）を記入します。Triggerの位置はブラウザのウィンドウ内のセンター位置で変わりません。
var scene = new ScrollMagic.Scene({
duration: 800, // スタートから800pxまで
offset: 300 // スタートは300px
})
今回は止めるだけですので、setPinでどの要素を止めるのか、デバッグ用のdebug.addIndicatorsの設定をして、controllerに渡します。
.setPin("#element1") // どの要素を止めるか
.addIndicators({name: "ScrollMagic"}) //インジケーターに表示される名前
.addTo(controller); // コントローラーに渡す
これだけで、指定した要素が止まります。簡単ですね。
複数の要素を止める
続いて止めたい要素が複数ある場合は、新規でシーンを作り、それをコントローラーに渡します。まずは、新しい要素を加え、idをelement2とします。
This is my pageThis is my page2
Scrollmagicはスクロール時にpaddingなどを入れて位置を維持するため、個別に操作しやすいように各要素をpositionでレイアウトし直します。
body{
height: 4000px;
}
.element{
position: absolute;
width: 150px;
height: 150px;
}
#element1{
left: 40%;
top: 400px;
background-color: #0FF;
text-align: center;
line-height: 150px;
}
#element2{
left: 60%;
top: 800px;
bottom: 0;
background-color: #f0e;
text-align: center;
line-height: 150px;
}
あとはシーンを2つ作り、それぞれ変数に入れます。最後にコントローラーに送って完成です。
var controller = new ScrollMagic.Controller();
続いて、シーンを作ります。そのシーンが影響するスクロールバーの位置を設定します。offsetでスタート位置（上から300px）、durationで終了距離（スタート位置から800px）を記入します。
// コントローラー
var controller = new ScrollMagic.Controller();
// シーン
var scene1 = new ScrollMagic.Scene({
duration: 800, // 800px存続
offset: 300 // スタートは300px
})
.setPin("#element1") // 要素の指定
.addIndicators({name: "ScrollMagic"}); //インジケーターの名前
var scene2 = new ScrollMagic.Scene({
duration: 800, // 800px存続
offset: 300 // スタートは300px
})
.setPin("#element2") // 要素の指定
.addIndicators({name: "ScrollMagic2"}); //インジケーターの名前
controller.addScene([
scene1,
scene2
]); //コントローラーに送る
これで同じ位置で止まり、同じ位置で動き出します。
各シーンごとで動き出す位置を変えることで、最初の要素が止まり後から来た要素に押し出されるような動きも実装できます。
#element2{
left: 60%;
top: 1000px; /*位置を修正*/
bottom: 0;
background-color: #f0e;
text-align: center;
line-height: 150px;
}
少しCSSを変更して
var scene1 = new ScrollMagic.Scene({
duration: 500, // 500px存続
offset: 200 // スタートは200px
})
.setPin("#element1") // 要素の指定
.addIndicators({name: "ScrollMagic"}); //インジケーターの名前
var scene2 = new ScrollMagic.Scene({
duration: 500, // 500px存続
offset: 900 // スタートは900px
})
.setPin("#element2") // 要素の指定
.addIndicators({name: "ScrollMagic2"}); //インジケーターの名前
controller・・・省略
このように、シーンを複数作り配置やタイミングなどを調整して、制作していきます。
さらにTweenMaxやvelocity.jsなどと連動して複雑なアニメーションを組み合わせることで、スクロールと表示が連動するWebサイトを簡単に作ることができます。
次回は、アニメーションに挑戦して、ブログで紹介したいと思います。
