こんにちは、CTOのづやです。
サイトを作っていると「スクロールに応じて何かをさせたい」なんてことをよく思ったりするのではないでしょうか。
0から書いてもいいのですが、簡単にできたら、というときのためのプラグイン「ScrollMagic」を試してみました。
こんな例のような動きがつけられちゃうらしいので、早速紹介していきます。
使うための準備
まずはこちらのGitHubから。
ScrollMagicはjQuery PluginなのでjQueryが必須なのはもちろん、TweenMaxといったライブラリも必要になります。
読み込むときには当然それらも必要になりますので、↓のような感じで準備しましょう。
<script src="js/TweenMax.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.scrollmagic.min.js"></script>スクロールに応じて要素が見えたらアニメーションさせる
一番基本的な形になるかと思います。
TweeMaxでアニメーションを定義して、ScrollSceneで動作する位置を設定して、コントローラに渡すといった流れを踏みます。
コードにすると↓のような感じです。
// 全体を制御するコントローラをつくります
var controller = new ScrollMagic();
// TwennMaxで動くアニメーションをつくります。
// これはidがbasicMove1の要素を0.5秒かけてopactyを1にするアニメーション
var tween = TweenMax.fromTo("#block1", 0.5, {opacity:0} , {opacity: 1});
// シーンをつくります。
// triggerElementに渡した要素が表示範囲にはいったらsetTweenで渡したアニメーションが実行されます
var scene = new ScrollScene({triggerElement: "#trigger1"})
.setTween(tween)
.addTo(controller);デフォルトではtriggerElementに渡した要素がスクロールされ、表示範囲の半分にきたらsetTweenで渡したアニメーションが発火されます。
triggerHookを指定することで、発火位置を変更できます。
// こんな感じにすると一番上に来たとき発火されます。
// onEnter を設定すると画面内に入った瞬間に発火します。
// 渡せるは3種類「onCenter」「onEnter」「onLeave」でデフォルトはonCenterになってます
var scene = new ScrollScene({triggerElement: "#trigger1" , triggerHook : "onLeave"})特定の位置で要素を止める
「普通にスクロールさせていき、特定の位置で要素が動かないようにしたい」なんてことも簡単に実装が可能です。
止めておきたい要素でシーンを作り、setPinを呼びます。
// idがblock2の要素が一番上にきたら2500px分idがblock2の要素を固定する
var scene = new ScrollScene({triggerElement: "#block2", duration: 2500 , triggerHook : "onLeave"})
.setPin("#block2")
.addTo(controller);スクロールの位置に応じて要素を変化させる
スクロールが所定の位置にきたらアニメーションさせたい、スクロールに連動して少しずつ状態を変化させていきたい、なんて場合も簡単に実装が可能です。
↓のようなシーンに対して、progressイベントを設定します。
var $moveObj = $("#"moveObj);
var scene3 = new ScrollScene({triggerElement: "#block", duration: 1250})
.on("progress", function (prog) { // 使いたいシーンに対してprogressイベントを設定します
var p = prog.progress; // 0～1の値が入ってきます
moveObj.css({
opacity: 1 * p //opacityをprogressの値に応じて変化させます。
});
})
.addTo(controller);まとめ
以上、一番よく使われるであろう機能に関してだけ書いてみました。
今回書いた機能を利用したデモがこちらです。
その他にもパララックス対応だったりモバイル対応だったり、諸々のサンプルが公式のデモサイトに載っております。
うまく利用してカッコいいサイトを作っていきたいですね。それでは。
※この記事はScrollMagic v1.3.0にて検証をしています。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
