2015.09.25 [金] ScrollMagicでアニメーション
前回の記事から1ヶ月ほど経ってしまいましたが、引き続きScrollMagicを使ってみました。予告通りアニメーションさせたいと思います。
バージョンが2.0.5に上がり、以前から利用できたGSAPに加え、新たにVelocity.jsがプラグインとして利用できるようになりました。
今回は、Velocity.jsを利用してアニメーションをさせていきたいと思います。Velocity.jsとは、jQueryの$.animateと互換性を持ち、超高速でさらに使いやすい機能を持ち合わせたオープンソースのアニメーションエンジンです。どれだけ早いのかは、jQueryやCSSアニメーションと比較した記事がありますので、そちらを読んでみてください。
ScrollmagicとVelocity.jsの基本
さて、まずはjQueryとVelocity.jsとScrollMagic本体、プラグインを読み込みます。今回もCDNから読み込んでいます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.velocity.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
最初の準備は、前回と変わりません。適当にhtmlとCSSを用意します。
Velocity.jsでアニメーション
CSSもこんな感じにしておきます。
.box1 {
width: 120px;
padding: 10px;
margin: 500px auto 0 auto;
text-align: center;
color: #fff;
}
.blue {
background-color: #3883d8;
}
続いて、JavaScriptでアニメーションの設定をしていきます。
これでトリガーがスクロールすることで、透明不透明が変わります。Velocity.jsの記述なので、簡単ですね。
さらにVelocity.jsのオプションを使って
Velocity.jsには、duration, easing, begin & complete, loop, delay, Scroll, display & visibilityなどのオプションがありますので、それらを使って「TRIDENT」の文字をアニメーションさせてみましょう。
htmlで画像を設置し、CSSのpositionで配置します。※CSSは省略
ScrollMagicで各画像のシーンを作っていきます。もっと簡単に作れるかもしれませんが「TRIDENT」で7文字、全体を止めるためのシーンも必要なので、合計8シーンを作ります。
//コントローラーを作ります。
var controller = new ScrollMagic.Controller();
//シーン１でTRIDENTを止めておく
var scene1 = new ScrollMagic.Scene({
duration: 800, // 800pxまで
offset: 100
})
.setPin(".trident") // 要素の指定
.addIndicators({name:"止まる"});
//シーン2でt1のアニメーション
var scene2 = new ScrollMagic.Scene({
triggerElement: '#trigger' ,
offset :350
})
// Vellocity.jsで移動してくるアニメーションを設定します。
.setVelocity(".word-t1", {left:0}, {duration: 400})
.addIndicators();// インジケーター
//シーン3でrのアニメーション
var scene3 = new ScrollMagic.Scene({
triggerElement: '#trigger' ,
offset :400
})
// Vellocity.jsで移動してくるアニメーションを設定します。
.setVelocity(".word-r", {top: 0}, {duration: 400})
.addIndicators();// インジェクター
//シーン4でiのアニメーション
var scene4 = new ScrollMagic.Scene({
triggerElement: '#trigger' ,
offset :450
})
// Vellocity.jsで移動してくるアニメーションを設定します。
.setVelocity(".word-i", {bottom: -150}, {duration: 400})
.addIndicators();// インジケーター
//シーン5でdのアニメーション
var scene5 = new ScrollMagic.Scene({
triggerElement: '#trigger' ,
offset :500
})
// Vellocity.jsで移動してくるアニメーションを設定します。
.setVelocity(".word-d", {left: 293}, {duration: 400})
.addIndicators();// インジケーター
//シーン6でeのアニメーション
var scene6 = new ScrollMagic.Scene({
triggerElement: '#trigger' ,
offset :550
})
// Vellocity.jsで拡大してくるアニメーションを設定します。
.setVelocity(".word-e", {scale: 1}, {duration: 400})
.addIndicators();// インジケーター
//シーン7でnのアニメーション
var scene7 = new ScrollMagic.Scene({
triggerElement: '#trigger' ,
offset :600
})
// Vellocity.jsでだんだん表示されるアニメーションを設定します。
.setVelocity(".word-n", {opacity: 1}, {duration: 400})
.addIndicators();// インジケーター
//シーン8でt2のアニメーション
var scene8 = new ScrollMagic.Scene({
triggerElement: '#trigger' ,
offset :650
})
// Vellocity.jsで回転するアニメーションを設定します。
.setVelocity(".word-t2", {rotateZ :'+=720deg'}, {duration: 400})
.addIndicators();// インジケーター
//addScene
controller.addScene([
scene1, scene2, scene3, scene4, scene5, scene6, scene7, scene8
]);
ScrollMagicと組み合わせるとチェイニングができなかったり、スクロールと連動しなかったりしますが、とりあえず、これで様々な動きを実装できました。機会があればTweenMaxも触ってみたいですね。
