アニメーションについて色々と勉強している。jQueryのアニメーションはこま落ちするし、CSSのアニメーションは計量だけど、少し複雑だったり、同時に走らせたりすると、(Macだと特に)カクついてしまうことが多くて困っていた。

Velocity.jsというアニメーションJSライブラリが計量で良いということで、最近結構いじっていて、すごく簡単に導入できるし、色々できそうで光を感じている。

Velocity.js

スムーススクロールをVelocity.jsで

とりあえず簡単なところからはじめてみた。よくあるページ内リンクの移動時とトップへ戻る際のスクロールをスムースにするやつ。

スムーススクロールをjQueryだけでやったやつ

今まではjQueryだけでやっていた。それが以下。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function () {
  $('a[href^=#]').click(function () {
    var speed = 600,
        href = $(this).attr("href"),
        target = $(href === "#" || href === "" ? 'html' : href),
        position = target.offset().top;
    $("html, body").animate({scrollTop: position}, speed, "swing");
    return false;
  });
});
</script>

これをベースに、jQueryのanimate をVelocity.jsに変える。

Velocity.jsにしたやつ

jQueryに依存しているため、まずはjQueryを読み込ませ、続いてVelocity.jsを読み込ませる。Velocity.jsにもCDNが用意されているので、それを利用することも可能。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/velocity/1.2.1/velocity.min.js"></script>
<script>
$(function () {
  $('a[href^=#]').click(function () {
    var href = $(this).attr("href"),
        target = $(href === "#" || href === "" ? 'html' : href);
    target.velocity("scroll", { duration: 1200, easing: "ease" });
    return false;
  });
});
</script>

とても簡単。scrollというコマンドが用意されていて、これを利用すれば、ページ内リンクの移動やトップへ戻る際のスクロール移動をスムースにできる。

Velocity.jsを使ったスムーススクロールのDEMO

Macだと、多少引っかかりを感じるのは気のせいということにしておこう。環境のせいかもしれない(jQueryのfadeInをvelocityにしたものは、引っかかりもなくとてもスムーズだった)。

easingは、linear、swing、ease、ease-in、ease-out、ease-in-outとか、一般的なものはそのまま使えて、他にもあるようだけど、まだよく分かっていない。UI Packがあって、読み込ませれば独自のアニメーションを使用することもできるようだ。

GSAPと迷ったけど、MITライセンスということもあって、このサイトのアニメーションは全てVelocity.jsに置き換えようと思っている。いつになるか分からないけど。。。

パフォーマンスについてもっと勉強したい。