Granim.jsは美しく変化するグラデーションのアニメーションを実装することができるJSライブラリです。流れるように色が変化していく様子に、思わず目が止まってしまいますね。ファイル容量も軽量なところがグッドです。
いろんなグラデーションタイプを用意
以下、Granim.jsのデモサイトになります。
画面全体の背景カラーがジワジワと変化していきます。オレンジ、青、紫、紺……など、多彩なカラーを見ることができます。
EXAMPLESというボタンをクリックすると、さまざまなサンプルを載せたページに行けます。ベーシックなタイプからRadialタイプなもの、それから画像に、変化するグラデーションを加えたものなど、ほかにもいろいろ用意されています。
各サンプルには実装するためのコード（JS、HTML、CSS）も記載されているので、とても便利です。どれもシンプルで使いやすく、手軽に実装できると思います。
また、オプションもいろいろ用意されているので、カスタマイズしたい人にも役立つはず。たとえば、「direction」には、diagonal、left-right、top-bottom、radialのなかから好きなタイプを設定できますし、「loop」をtrueかfalseに設定することも可能です。
ほかにも、opacity、stateTransitonSpeed、transitionSpeedなどさまざまなオプションを備えています。
流れるように美しく変化するグラデーションを手軽に実装したい方は、ぜひGranim.jsを活用してみてください。
