グラデーションをアニメーションさせる事ができるJSライブラリ「Granim.js」!

2016/09/08

こんにちは。
今回はグラデーションをアニメーションさせる事ができるJSライブラリ「Granim.js」!です。

グラデーションをアニメーションできるおもしろいJSライブラリを紹介します。
ただのグラデーションだけでなく、画像やマスクを使ったものやクリックでグラデーションを切り替える事もできますよ。

グラデーションをアニメーションさせる事ができるJSライブラリ「Granim.js」!

Granim.js

granim-js

 

JSライブラリ「Granim.js」をダウンロードしてみよう!

https://sarcadass.github.io/granim.js/にアクセスして右の「DOWNLOAD」のボタンをクリックしてダウンロードします。

 

JSライブラリ「Granim.js」を設置してみよう!

granim.min.jsを/bodyの手前に読み込みます。

 

その下に下記のスクリプトを記述します。

 

html部分を記述します。
先ほど指定した「granim-canvas」というidを付けます。

 

実践Webデザイン jQuery+CSSフレームワークでサクサクつくる「動き」と「仕掛け」
実践Webデザイン jQuery+CSSフレームワークでサクサクつくる「動き」と「仕掛け」

 

いかがでしたか。おもしろい動きをさせたい時に使うといいかもしれませんね。
以上でグラデーションをアニメーションさせる事ができるJSライブラリ「Granim.js」!でした。

topへ戻る