Granim.js

JavaScript

流れるように変化するグラデーションのアニメーションを実装できる「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

関連記事

  1. stackgrid.adem.js

    JavaScript

    コンテンツをグリッド状にスタッキングできる「stackgrid.adem.js」

    stackgrid.adem.jsはコンテンツをグリッド状にスタッキン…

  2. Text Scramble Effect

    JavaScript

    テキストをスクランブルしながら表示していく「Text Scramble Effect」

    Text Scramble Effectはテキストをカシャカシャとスク…

  3. Emergence.js

    JavaScript

    ブラウザで要素の可視性を検出する「Emergence.js」

    Emergence.jsは、ブラウザで要素の可視性を検出することができ…

  4. no-image

    JavaScript

    カスタマイズ性の高いjQueryアラート・モーダル・lightboxプラグイン「jAlert」

    jAlertはカスタマイズ性の高いjQueryアラート・モーダル・li…

  5. no-image

    JavaScript

    ミニマリスティックでフレキシブルなjQueryスライダー「Bore Bones Slider」

    Bore Bones Sliderはミニマリスティックでフレキシブルな…

  6. JavaScript

    jQueryプラグイン・2014年上半期56選まとめ

    気づいたら2014年も上半期が終わってしまいましたね。そんなわけで、2…

最近の記事

  1. 赤いなつめ
  2. ペーストしてスタイルを合わせる
  3. Hermèsオレンジスポーツバンド
  4. GoPro HERO8 Black

アーカイブ

PAGE TOP