グラデーションのアニメーションが簡単に作れるGranim.js

こんにちは、ウェブラボ技術メモです。

最近、アニメーションがついたメインビジュアルが流行っていますよね。

そこで今回はメインビジュアルに使えそうな、グラデーションのアニメーションが簡単にできるgranim.jsを実装してみたいと思います。

グラデーションも2017年webデザインのトレンドなので、ぜひお試しください！

まず、下記サイトの「DOWNLOAD」から最新版をダウンロードします。

※今回使用したのはバージョンv1.0.6です。

■実装の仕方

1.　granim.jsを読み込ませます。

2.　HTMLにcanvasタグを記述します。

3.　下記スクリプトを記述します。

//左右にグラデーション ============================================
    var granimInstance = new Granim({
        element: '#canvas-basic',//グラデーションを適用する要素
        direction: 'left-right', //グラデーションのタイプ（左右はleft-right、円形はradialなど…）
        elToSetClassOn: '.logo_wb', //明るさのクラスを追加したい場所の要素
        name: 'wb',//明るさのクラス名（☆☆-lite,☆☆-darkの☆☆部分）
        opacity: [1, 1], //三色の例→[.5, .3, 1]
        isPausedWhenNotInView: true,
        states: {
            "default-state": {
                gradients: [
                            ['#07539f', '#0e7ae6'], 　 //[始まりの色,終わりの色]ここに好きな色を追加できます。
                            ['#07969f', '#11888f'], 　
                            ['#0d2d4c', '#001a34']
                        ],
                transitionSpeed: 10000　 //グラデーションの移り変わる速さ
            }
        }
    });

出来上がりです！

今回は公式サイトのデモページと同じように作ってみました。

また、スクリプトの記述を変えることでアニメーションの細かい設定ができます。

■主な設定

• element [グラデーションを適用する要素]
• direction [グラデーションのタイプ]
  左右　left-right
  円形　radial
  上下　top-bottom
  対角線　diagonal
• gradients [グラデーションのカラーコード ]
  二色以上にもできますが、opacityで透明度の指定も同じ数だけ記述する必要があります。
• opacity [グラデーションの透明度]
• transitionSpeed [グラデーションの色が変わる速さ]
  個人的にはゆっくり変わった方がおしゃれだと思います。
  したがってデフォルトの10000ぐらいがおすすめです。
• loop [繰り返し]
  false ループをしない
  true ループする

■グラデーションの明るさを判定する設定

• elToSetClassOn [クラス名の追加]
• name　[明るさのクラス名（”任意のname”-lite, ”任意のname”-darkの部分）]
  nameを指定しないとbodyに明るさ判定のクラスがついてしまうので注意してください。

もっと細かい設定をしたい場合は公式デモページやAPIをご確認ください。

以上、ウェブラボ技術メモでした。