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

Javascript

2016/09/08

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

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

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

Granim.js

granim-js

DEMO DOWNLOAD

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

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

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

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

<script type="text/javascript" src="js/granim.min.js"></script>

1	<script type="text/javascript" src="js/granim.min.js"></script>

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

<script>
var granimInstance = new Granim({
   element: '#granim-canvas',
   name: 'granim',
   opacity: [1, 1],
   states : {
       "default-state": {
           gradients: [
               ['#834d9b', '#d04ed6'],
               ['#1CD8D2', '#93EDC7']
           ]
       }
   }
);
</script>