direction

direction

グラデーションの方向を指定します。

• 初期値 : diagonal
• type : string

グラデーションの方向を指定します。 方向は以下から指定することができます。

• diagonal : 対角線
• left-right : 左右
• top-bottom : 上下
• radial : 放射状

デモ

グラデーションの方向にdiagonalを指定して表示しています。 各ボタンを押すと、対応したグラデーション方向に切り替わります。

JavaScript

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

document.querySelector('.diagonal').addEventListener('click', function() {
  granimInstance.changeDirection('diagonal');
});

document.querySelector('.left-right').addEventListener('click', function() {
  granimInstance.changeDirection('left-right');
});

document.querySelector('.top-bottom').addEventListener('click', function() {
  granimInstance.changeDirection('top-bottom');
});

document.querySelector('.radial').addEventListener('click', function() {
  granimInstance.changeDirection('radial');
});

HTML

<canvas id="granim-canvas" style="width:100%;"></canvas>
<div class="buttons">
  <div class="button diagonal">diagonal</div>
  <div class="button left-right">left-right</div>
  <div class="button top-bottom">top-bottom</div>
  <div class="button radial">radial</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;
}