グラデーションのアニメーションが簡単に作れる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をご確認ください。

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

  • このページを共有する

関連記事こちらの記事も合わせてどうぞ。