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

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

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

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

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

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

「granim.js」公式サイト

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

■実装の仕方

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

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

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

出来上がりです！

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

デモページはこちら

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

■主な設定

• 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をご確認ください。

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