東京都新宿区のWeb制作会社 ウェブラボ株式会社

クリエイターブログ

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

2017.05.25 Posted by

こんにちは、ウェブラボ技術メモです。
今回はテキストや画像といった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に対応していないので、さりげなく使うのが良いかもしれません。

以上、技術メモでした。

オリエンシートダウンロード

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278