elToSetClassOn

elToSetClassOn

dark/lightクラスを付与する要素を指定します。

• 初期値 : body
• type : string

アニメーション時に-dark/-lightクラスを付与する要素を指定します。 (例#canvas-wrapper)
nameを設定した場合に便利です。

デモ

#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;
}