Granim.js - にほんご。

elToSetClassOn

更新日: 2018-09-28

elToSetClassOn

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

  • 初期値 : body
  • type : string

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


デモ

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

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


© 2016 Benjamin Blonde Released under the MIT license

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