東京都新宿区のWeb制作会社 - ウェブラボ株式会社

クリエイターブログ

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

2017.06.23 Posted by

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

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

そこで今回はメインビジュアルに使えそうな、グラデーションのアニメーションが簡単にできる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をご確認ください。

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

オリエンシートダウンロード

採用サイト 絶対に外せない5つのチェックポイント

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278