Granim.js - にほんご。

direction

更新日: 2018-09-28

direction

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

  • 初期値 : diagonal
  • type : string

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

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


デモ

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

diagonal
left-right
top-bottom
radial
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;
}


© 2016 Benjamin Blonde Released under the MIT license

このコンテンツはBenjamin Blonde(sarcadass)によるGranim.jsドキュメントを翻訳/改変したものです。