要素をブルブル震わせるプラグイン「CSShake」
2017.05.25 Posted by Coding_team
こんにちは、ウェブラボ技術メモです。
今回はテキストや画像といったHTML要素をブルブル震わせるプラグイン「CSShake」を使用してみようと思います。
まず公式サイトの一番下までスクロールし、「Download」ボタンからCSSファイルをダウンロードします。
「CSShake」公式サイト
公式サイトでも紹介されているような動きを利用して、簡単なDEMOを作成しました。
DEMOはこちら
それでは実際に実装していきましょう
まずダウンロードしたCSSをHTMLのhead内に読み込みます。
■HTML
|
1 |
<link rel="stylesheet" type="text/css" href="css/csshake.css"> |
そしてブルブル震わせたい要素にclassを設定します。
■HTML
|
1 |
<p class="shake">テキスト</p> |
これだけで実装できてしまうんです。簡単ですね！
震え方には下記のような種類があります。
|
1 2 3 4 5 6 7 8 9 10 11 |
<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に対応していないので、さりげなく使うのが良いかもしれません。
以上、技術メモでした。
関連記事こちらの記事も合わせてどうぞ。
