element

element (required)

対象のcanvas要素を指定します。 必須です。

• 初期値 : /
• type : string、HTMLCanvasElement

グラデーションアニメーションを使うcanvas要素のCSSセレクタ、 またはHTMLCanvasElement^*1自体を指定します。

*1 例えば#granim-canvasや、document.querySelector('#granim-canvas')。

デモ

elementに#granim-canvasを指定しています。

JavaScript

var granimInstance = new Granim({
  element: '#granim-canvas',
  opacity: [1, 1],
  states : {
    'default-state': {
      gradients: [
        ['#834D9B', '#D04ED6'],
        ['#1CD8D2', '#93EDC7']
      ]
    }
  }
});

HTML

<canvas id="granim-canvas" style="width:100%;"></canvas>