文字にマウスオーバーするとぐにゃぐにゃした効果を与えるjQueryプラグイン「chaffle」

ナビゲーションなどでマウスオーバーした際に効果を与えられるともしかしたらCTRに良い影響があるかもしれません。
chaffleはマウスオーバー時にランダムで文字をぐにゃぐにゃっと表示させられるjQueryプラグインで、簡単に導入ができます。
文字にマウスオーバーするとぐにゃぐにゃした効果を与えるjQueryプラグイン「chaffle」サンプル

使用方法
chaffleからファイル一式をダウンロード。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type='text/javascript' src='chaffle.js'></script>
<script type="text/javascript">
$(document).ready(function() {
$('.chaffle').chaffle({
speed: 20, //速度
time: 60 //時間
});
});
</script>

上記のように記述したら、ぐにゃぐにゃさせたい部分にclassを振れば完成です。
<p class="chaffle" data-lang="en">Chaffle</p>
なお、data-langでは英語、日本語(漢字、ひらがな、カナ)が設定でき、ランダムで表示される文字が対応させられます。
data-lang="en":英語
data-lang="ja":日本語(漢字)
data-lang="ja-hiragana":ひらがな
data-lang="ja-katakana":カタカナ

文字にマウスオーバーするとぐにゃぐにゃした効果を与えるjQueryプラグイン「chaffle」サンプル

sponsors

「文字にマウスオーバーするとぐにゃぐにゃした効果を与えるjQueryプラグイン「chaffle」」をシェアする

記事作成:
記事URL:

TOP > > > 文字にマウスオーバーするとぐにゃぐにゃした効果を与えるjQueryプラグイン「chaffle」