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

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

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

「CSShake」公式サイト

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

DEMOはこちら

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

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

■HTML

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

■HTML

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

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

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

◯ Google Chrome

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

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

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

以上、技術メモでした。

  • このページを共有する

関連記事こちらの記事も合わせてどうぞ。