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

SuperEmbed.jsさまざまな埋め込み動画をレスポンシブで表示できる「SuperEmbed.js」前のページ

マテリアルデザインによるレスポンシブなテーブル実装「Material Design Responsive Table」次のページMaterial Design Responsive Table

関連記事

  1. Image Gallery Threejs
  2. 2013年下半期jQueryプラグインまとめ

    JavaScript

    2013年下半期に紹介したjQueryプラグイン68選まとめ

    今年も残すところあとわずかとなりました。今年もたくさんのjQueryプ…

  3. no-image

    JavaScript

    3Dキューブによる画像ギャラリー「3D Cube Image Gallery」

    3D Cube Image Galleryは、3Dキューブによるオシャ…

  4. no-image

    JavaScript

    円形に飛び出すメニューを実装できる「ggExpandableOptions」

    ggExpandableOptionsは円形に飛び出すメニューを実装で…

最近の記事

  1. cheero Power Mountain mini 30000mAh CHE-110
  2. 帆布カメラインナーケース B-2タイプ
  3. 雨粒

アーカイブ

PAGE TOP