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. Simple button checks

    JavaScript

    カスタマイズ可能なチェックボックスを実装できる「Simple button checks」

    Simple button checksはカスタマイズ可能なチェックボ…

  2. no-image

    JavaScript

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

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

  3. Swipeshow

    JavaScript

    スワイプにも対応したシンプルなスライドショーを実装できるjQueryプラグイン「Swipeshow」…

    タッチデバイスのスワイプにも対応したシンプルなスライドショーを実装する…

  4. no-image

    JavaScript

    チェックボックスをアニメーショントグルにする「jquery-simpletoggler」

    jquery-simpletogglerは、デフォルトのチェックボック…

  5. no-image

    JavaScript

    カードを入れ替えるような3Dアニメーションによるスライダー「stack-slider」

    stack-sliderはカードを入れ替えるような3Dアニメーションに…

  6. Palette-js

    JavaScript

    美しいカラーパレッドを追加できる「Palette-js」

    Palette-jsは美しいカラーパレッドを手軽にプロジェクトに追加す…

最近の記事

  1. Soundcore Ace A1
  2. cheero USB-C PD Charger 60W
  3. DY-S01
  4. OWL-QI10W04

アーカイブ

PAGE TOP