流れるように変化するグラデーションのアニメーションを実装できる「Granim.js」

Granim.js

Granim.jsは美しく変化するグラデーションのアニメーションを実装することができるJSライブラリです。流れるように色が変化していく様子に、思わず目が止まってしまいますね。ファイル容量も軽量なところがグッドです。

いろんなグラデーションタイプを用意

デモ

画面全体の背景カラーがジワジワと変化していきます。オレンジ、青、紫、紺……など、多彩なカラーを見ることができます。

EXAMPLESというボタンをクリックすると、さまざまなサンプルを載せたページに行けます。ベーシックなタイプからRadialタイプなもの、それから画像に、変化するグラデーションを加えたものなど、ほかにもいろいろ用意されています。

各サンプルには実装するためのコード(JS、HTML、CSS)も記載されているので、とても便利です。どれもシンプルで使いやすく、手軽に実装できると思います。

また、オプションもいろいろ用意されているので、カスタマイズしたい人にも役立つはず。たとえば、「direction」には、diagonal、left-right、top-bottom、radialのなかから好きなタイプを設定できますし、「loop」をtrueかfalseに設定することも可能です。

ほかにも、opacity、stateTransitonSpeed、transitionSpeedなどさまざまなオプションを備えています。

Granim.js

スポンサーリンク

スポンサーリンク

アクセスランキング

Tags

オススメ商品

Archives