transitionSpeed

transitionSpeed

グラデーションの変化時間を指定します。

• 初期値 : 5000
• type : int

グラデーションが変化する時間を指定します。

デモ

グラデーションの変化時間を指定しています。 '2000'ボタンを押すと2秒ごとに色が変化します。

JavaScript

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

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

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

HTML

<canvas id="granim-canvas" style="width:100%;"></canvas>
<div class="buttons">
  <div class="button state-2000">2000</div>
  <div class="button default-state">5000</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;
}