Granim.jsでグラデーションをアニメーション表示してWebサイトをリッチにしよう #JavaScript

GitHubでトレンド入りしているJavaScriptライブラリGranim.jsの紹介記事です。

デモ画面が用意されているのでどんなのか見てみてください。

※執筆時点（2016/09/15）のバージョンはv1.0.5です。
公開されて間もないため、かなりの頻度で更新されています。
バグフィックスや機能追加等の変更が入ると思います。

使い方

基本的にはデモ画面やAPIを見てください。

本記事ではそこを見ても分かりづらかった点を記載していきます。

ライブラリはzipをダウンロードした方が手軽です。（npmでも提供されています）
https://github.com/sarcadass/granim.js/releases
上記から最新版を落としておきます。

最小構成は以下の様になります。

<canvas>タグを用意
granim.jsを読み込む
new Granim({});でグラデーションを設定する

...
<canvas id="canvas-basic"></canvas>

<script src="granim.js"></script>

<script>
var granimInstance = new Granim({
    element: '#canvas-basic',
    direction: 'left-right',
    opacity: [1, 1],
    states : {
        "default-state": {
            gradients: [
                ['#F00', '#000'],
                ['#000', '#00F']
            ]
        }
    }
});
</script>
...

API補足

APIで分かりづらかったところを補足しておきます。

element

document.querySelector()で指定するセレクタの文字列を指定

name, elToSetClassOn

これらのプロパティはグラデーションの明るいか暗いかで何らかのスタイルの変更を行いたい場合に使用します。

Granim.jsのトップページがこれを使っています。
明るい時は文字を黒ベースに、暗い時は白ベースにスタイルを切り替えています。

name

任意の文字列でOKです

elToSetClassOn

elementプロパティと同様にdocument.querySelector()で指定するセレクタの文字列を指定します。
未指定時は<body>に追加します。

何をしているのか

グラデーションの明るさを計算して、全体的なグラデーションが暗い状態なのか明るい状態なのかを計算します。
暗い状態だった場合はelToSetClassOnで取得したHTML要素に以下のクラスを追加します。
nameの値 + -dark

逆に明るい状態だった場合は以下の様に設定します。
nameの値 + -light

例）
nameにhogeを指定した場合は
hoge-dark, hoge-lightになります。

isPausedWhenNotInView

描画しているグラデーションがブラウザの画面外に行った時にアニメーションを止める機能です。
グラデーションの一部が再度ブラウザの画面内にはいると動き始めます。
※スクロールイベントを監視している

opacity

不透明度です。
opacityで指定する配列の長さはグラデーションの色数と一致させる必要があります。

例）gradientsに3色指定しているのでopacityも3つ

    opacity: [1, .5, 0],
    states : {
        "default-state": {
            gradients: [
                ['#485563', '#29323c', '#29323c'],
                ['#00c6ff', '#0072ff', '#0072ff']
            ]
        }
    }

stateTransitionSpeed

複数のStateを切り替える際のスピードです。
※Stateはグラデーションの1セットのことです。
デモ画面のInteractive GradientsにStateを切り替えるサンプルがあります。

技術概要

元々<canvas>タグにはグラデーションを作るためのメソッドが用意されています。

内部的にはこれらの機能を細かい周期で呼び、<canvas>の中身を更新することでグラデーションのアニメーション化を実現しています。

あとがき

筆者は画面がガチャガチャ動くようなWebサイトは嫌いなのですが、色が変わるぐらいだとしつこくなくて良いと思います。

デモ画面のヘッダーで使われているようにワンポイントで使うのもありだと思います。