ScrollMagic.jsを使って、比較的簡単にスクロースアニメーションを実装するためのメモです。
正直、スクロールに応じたギミックはあまり得意ではないのですが、ちょっと調べてみると割と簡単じゃん！てことでScrollMagic.jsでデモ作成しました。
luxy.jsも秀逸でしたが、ScrollMagic.jsも用途に応じて色々楽しめそうです。
プラグインをダウンロードして設置する
なにはともあれプラグインをダウンロードしましょう。
GitHubからお願いします。
では、設置してみます。
今回は「stopExecutionOnTimeout.js」と「ScrollMagic.js」を使用します。
</body>の上に記述しましょう。
<script src="js/stopExecutionOnTimeout.js"></script> <script src="js/ScrollMagic.js"></script>
アニメーションイメージを準備する
今回は歩いてるビジネスマンをスクロールアニメで動かします。
作成したら、背景透過のpngデータで書き出しましょう。
CSSを記述する
では、CSSを記述します。
今回は「viewer」というクラスを用意してアニメーションイメージをbackgroundに設定します。また、1人物を1フレームのアニメーションとするためにフレーム数だけのクラス（frame1〜）を用意し、それぞれにbackground-positionで等間隔にずらしながら設定します。
.viewer{
height: 100vh;
margin-left: auto;
margin-right: auto;
max-width: 280px;
width: 100%;
background-repeat: no-repeat;
background-position: 0 50%;
background-image: url(images/doodle-sprite1.png);
}
.viewer.frame1 {
background-position: -280px 50%;
}
.viewer.frame2 {
background-position: -560px 50%;
}
.viewer.frame3 {
background-position: -840px 50%;
}
.viewer.frame4 {
background-position: -1120px 50%;
}
.viewer.frame5 {
background-position: -1400px 50%;
}
.viewer.frame6 {
background-position: -1680px 50%;
}
.viewer.frame7 {
background-position: -1960px 50%;
}
.viewer.frame8 {
background-position: -2240px 50%;
}
.viewer.frame9 {
background-position: -2520px 50%;
}
.viewer.frame10 {
background-position: -2800px 50%;
}
.viewer.frame11 {
background-position: -3080px 50%;
}
.viewer.frame12 {
background-position: -3360px 50%;
}
.viewer.frame13 {
background-position: -3640px 50%;
}
.viewer.frame14 {
background-position: -3920px 50%;
}
.viewer.frame15 {
background-position: -4200px 50%;
}
.viewer.frame16 {
background-position: -4480px 50%;
}
.viewer.frame17 {
background-position: -4760px 50%;
}
HTMLを記述する
次にHTMLを記述します。
<section class="scene" id="sticky"> <div class="viewer"></div> </section>
ScrollMagic.jsのギミックには#stickyと.viewerを使用します。
JSを記述する
先述プラグインの直下にJSを記述します。
<script src="js/stopExecutionOnTimeout.js"></script>
<script src="js/ScrollMagic.js"></script>
<script>
var viewer = document.querySelector('.viewer'),
frame_count = 16,
offset_value = 200;
var controller = new ScrollMagic.Controller({
globalSceneOptions: {
triggerHook: 0,
reverse: true } });
new ScrollMagic.Scene({
triggerElement: '#sticky',
duration: frame_count * offset_value + 'px',
reverse: true }).
setPin('#sticky').
addIndicators().
addTo(controller);
for (var i = 1, l = frame_count; i <= l; i++) {if (window.CP.shouldStopExecution(0)) break;
new ScrollMagic.Scene({
triggerElement: '#sticky',
offset: i * offset_value }).
setClassToggle(viewer, 'frame' + i).
addIndicators().
addTo(controller);
};
</script>
フレーム数とスクロール速度
viewerクラスのアニメーションのフレーム数とスクロール速度を設定します。
var viewer = document.querySelector('.viewer'),
frame_count = 16,//フレーム数
offset_value = 200;//スクロール速度（数字が大きくなれば遅くなります。）
特定の位値で要素を止める
特定の位値で要素を止めます。止めておきたい要素でシーンを作り、setPinを呼びます。
new ScrollMagic.Scene({
triggerElement: '#sticky',
duration: frame_count * offset_value + 'px',
reverse: true }).
setPin('#sticky').
addIndicators().
addTo(controller);
スクロールの位置に応じてフレームをアニメーションにする
スクロールに合わせてviewerクラスのアニメーションを動かします。
for (var i = 1, l = frame_count; i <= l; i++) {if (window.CP.shouldStopExecution(0)) break;
new ScrollMagic.Scene({
triggerElement: '#sticky',
offset: i * offset_value }).
setClassToggle(viewer, 'frame' + i).
addIndicators().
addTo(controller);
};
以上です。
デモ用意しました。
ScrollMagic.jsは、その他にもパララックス対応だったりモバイル対応だったり、色々サンプルが公式のデモサイトに紹介されています。
是非ご利用ください。
