クリックするとウェーブみたいな効果を与えられるJavaScript「Waves」

クリックするとウェーブみたいな効果を与えられるJavaScript「Waves」
クリック時に効果を与えることでアクションが起きたことを明示できます。
Wavesを使用するとクリックした場所から要素全体にまるでウェーブが生じたような効果を洗えることができます。

使用方法
Wavesからファイル一式をダウンロード。
<link rel="stylesheet" type="text/css" href="waves.min.css" />
<script type="text/javascript" src="waves.js"></script>
<script type="text/javascript">
Waves.displayEffect();
</script>

あとは上記より上にウェーブさせたい要素を記述していきます。
aタグはもちろんinput、divにも対応しています。
<a href="#" class="waves-effect waves-button">Click Here</a>
<input type="submit" class="waves-effect waves-button" value="Input Submit">
<div class="waves-effect waves-block" style="background: #ff4f0f;color:#fff;">
Block A
</div>

基本的にはwaves-effectと要素に適したclassをふれば完成です。
ボタン: waves-button、ブロック要素:waves-block

クリックするとウェーブみたいな効果を与えられるJavaScript「Waves」

sponsors

「クリックするとウェーブみたいな効果を与えられるJavaScript「Waves」」をシェアする

記事作成:
記事URL:

TOP > > > クリックするとウェーブみたいな効果を与えられるJavaScript「Waves」