name

name

elToSetClassOnで指定した要素に付与するクラス名を指定します。

• 初期値 : false
• type : string

elToSetClassOn要素の明るさに応じて追加されるクラス名の-dark/-light付与されるプレフィックスです。 -dark/-lightクラスはアニメーション中に更新されます。
nameを指定しないと-dark/-lightクラスは設定されません。

デモ

#granim-canvasの明るさに応じて"result"ボックスのスタイルが切り替わります。

JavaScript

var granimInstance = new Granim({
  element: '#granim-canvas',
  name: 'granim',
  elToSetClassOn: '#result',
  opacity: [1, 1],
  states : {
    'default-state': {
      gradients: [
        ['#4A343C', '#464268'],
        ['#C5CAE9', '#F8BBD0']
      ]
    }
  }
});

HTML

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

CSS

#result {
  color: #999;
  width: 100px;
  height: 100px;
}

.granim-light {
  background-color: #ddd;
}

.granim-dark {
  background-color: #444;
}