opacity

opacity (required)

透明度を指定します。 必須です。

• 初期値 : /
• type : intの配列

グラデーション内で指定したそれぞれの色の透明度を指定することができます。 もし2色なら[1, 5]、3色なら[1, .5, 1]...

* 色数はstate.gradientsの配列の要素数です。

デモ

透明度を指定して表示しています。

JavaScript

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

HTML

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

CSS

.opacity {
  position: relative;
}

.opacity canvas {
  position: relative;
  z-index: 2;
}

.opacity div {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  z-index: 1;

  height: 1.6em;
  color: #333;
  text-align: center;
  font-size: 2.4rem;
  font-weight: bold;
}