こんにちは。
今回はグラデーションをアニメーションさせる事ができるJSライブラリ「Granim.js」!です。
グラデーションをアニメーションできるおもしろいJSライブラリを紹介します。
ただのグラデーションだけでなく、画像やマスクを使ったものやクリックでグラデーションを切り替える事もできますよ。
グラデーションをアニメーションさせる事ができるJSライブラリ「Granim.js」!
Granim.js
JSライブラリ「Granim.js」をダウンロードしてみよう!
https://sarcadass.github.io/granim.js/にアクセスして右の「DOWNLOAD」のボタンをクリックしてダウンロードします。
JSライブラリ「Granim.js」を設置してみよう!
granim.min.jsを/bodyの手前に読み込みます。
1 | <script type="text/javascript" src="js/granim.min.js"></script> |
その下に下記のスクリプトを記述します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <script> var granimInstance = new Granim({ element: '#granim-canvas', name: 'granim', opacity: [1, 1], states : { "default-state": { gradients: [ ['#834d9b', '#d04ed6'], ['#1CD8D2', '#93EDC7'] ] } } ); </script> |
html部分を記述します。
先ほど指定した「granim-canvas」というidを付けます。
1 | <canvas id="granim-canvas"></canvas> |
実践Webデザイン jQuery+CSSフレームワークでサクサクつくる「動き」と「仕掛け」
いかがでしたか。おもしろい動きをさせたい時に使うといいかもしれませんね。
以上でグラデーションをアニメーションさせる事ができるJSライブラリ「Granim.js」!でした。