states

states (required)

グラデーションで利用する状態(state)を指定します。

• 初期値 : /
• type : object

オブジェクトには全ての状態(state)が含まれます。

状態をカスタマイズするための全てのオプションと、グラデーションを利用することができます。 好きな名前で状態を生成し、パラメータを追加します。 デフォルトでは、1つめの状態の名前はdefault-stateですが、defaultStateNameで変更することができます。

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

• gradients
• transitionSpeed
• loop

デモ

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

JavaScript

var granimInstance = new Granim({
  element: '#granim-canvas',
  opacity: [1, 1],
  states : {
    'default-state': {
      gradients: [
        ['#834D9B', '#D04ED6'],
        ['#1CD8D2', '#93EDC7']
      ],
      transitionSpeed: 2000,
      loop: true,
    },
    'violet-state': {
      gradients: [
        ['#9D50BB', '#6E48AA'],
        ['#4776E6', '#8E54E9']
      ],
      transitionSpeed: 5000,
      loop: false,
    }
  }
});

document.querySelector('.default-state').addEventListener('click', function() {
  granimInstance.changeState('default-state');
});

document.querySelector('.violet-state').addEventListener('click', function() {
  granimInstance.changeState('violet-state');
});

HTML

<canvas id="granim-canvas" style="width:100%;"></canvas>
<div class="buttons">
  <div class="button violet-state">violet-state</div>
  <div class="button default-state">default</div>
</div>

CSS

.buttons {
  display: flex;
  justify-content: center;
}

.buttons .button {
  margin: 8px;
  border: 1px solid #000;
  color: #000;
  padding: 8px;
  text-align: center;
  width: 8em;
  transition: all 300ms ease;
}

.buttons .button:hover {
  cursor: pointer;
  background-color: #000;
  color: #fff;
  transition: all 300ms ease;
}