要素をブルブル震わせるプラグイン「CSShake」

こんにちは、ウェブラボ技術メモです。
今回はテキストや画像といったHTML要素をブルブル震わせるプラグイン「CSShake」を使用してみようと思います。

まず公式サイトの一番下までスクロールし、「Download」ボタンからCSSファイルをダウンロードします。

「CSShake」公式サイト

公式サイトでも紹介されているような動きを利用して、簡単なDEMOを作成しました。

DEMOはこちら

それでは実際に実装していきましょう

まずダウンロードしたCSSをHTMLのhead内に読み込みます。

■HTML

<link rel="stylesheet" type="text/css" href="css/csshake.css">

そしてブルブル震わせたい要素にclassを設定します。

■HTML

<p class="shake">テキスト</p>

これだけで実装できてしまうんです。簡単ですね！

震え方には下記のような種類があります。

<p class="shake">通常</p>
<p class="shake-slow">ゆっくり震える</p>
<p class="shake-little">小刻みに震える</p>
<p class="shake-hard">激しく震える</p>
<p class="shake-horizontal">水平方向に震える</p>
<p class="shake-vertical">垂直方向に震える</p>
<p class="shake-rotate">回転するように震える</p>
<p class="shake-opacity">透明度を変化させながら震える</p>
<p class="shake-crazy">とても激しく震える</p>
<p class="shake shake-constant">常に震える</p>
<p class="shake shake-chunk shake-constant">時々大きく震える</p>

対応ブラウザについて確認してみました。

◯ Google Chrome

◯ Firefox
× Safari
◯ Opera
◯ Internet Explorer 10+
× Internet Explorer 7～9

たくさん使うと画面がうるさくなってしまいますが、

テキストや画像を注目させたい場合に便利ですね！
残念ながらSafariに対応していないので、さりげなく使うのが良いかもしれません。

以上、技術メモでした。