source

source (required)

画像パスを指定します。

• 初期値 : /
• type : string

画像ソースを指定します。 例えばimg/800x200.jpg。

デモ

画像を指定しています。

* デフォルトではグラデーションの下に画像が表示されるため、 opacityを1未満にする必要があります。

JavaScript

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

HTML

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