image

image v1.1.0

使用する画像オプションをを指定します。

• 初期値 : /
• type : object

画像をカスタマイズするための全てのオプションを利用することができます。 brendingModeは画像とグラデーションを指定した場合のみ動作します。

オブジェクトの各オプションについて詳しくは、以下を参照してください。

• source
• position
• stretchMode
• blendingMode

デモ

imageのオプションを指定して表示しています。

JavaScript

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

HTML

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