Introduction

この小さな(17kB以下)ライブラリを使って インタラクティブで流れるようなグラデーションアニメーションを作りましょう。

インストール

npm

$ npm install granim --save

bower

$ bower install granim

static

releasesから最新バージョンをダウンロードしてください。

使い方

<!-- Create a <canvas> element -->
<canvas id="granim-canvas"></canvas>

<!-- Call the script -->
<script src="granim.min.js"></script>

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

デモ

上記スクリプトの実行結果です。