画像やバナーを簡単に「ブルブル」震わせる方法

色んなウエブサイトを見ていると、画像やボタンが「ブルブルッ」と震えて注目を集めるようなものを見かけます。

例えば何かの購入ページで「購入はこちら！」みたいなボタンが「ブルブル」と震えていて、、、注目させて押させそうなボタン。

自分は、あの震えがどれほど効果的なのかは定かではないのですが、少なくとも注目を集めるという点においては有効な部分もあるのではないでしょうか。

（一説には、かなり購入率がアップするそうですが？）

今日はそんな「ブルブル」をcsshakeというCSSを追加して簡単に実装したいとおもいます。

まずは、CSShakeのダウンロードページにいきましょう。

http://elrumordelaluz.github.io/csshake/

一番下のDownloadからDLします。

ダウンロードボタンを押すと実際にダウンロードされるわけではなく、CSSファイルに飛ぶようになってますのでダウンロードボタンを右クリックして「リンク先を保存」やCSSファイルを全コピーするなりして持ってきましょう。

設定及び使用方法

①ダウンロードしたcsshake.cssを指定する

    
<link href="cssshake.css" rel="stylesheet" />

※私はcssファイルを編集するのが面倒くさいのでSimple Custom CSSプラグインを使ってcsshake.cssファイルを貼り付けました。

②ブルブルさせたい要素に指定されたclassを書く

    
// shakeクラスを指定
<img class="shake" src="https://bulesky58.com/◯◯/wp-content/uploads/2017/06/Download.png">

// shakeとshake-hardを指定
<img class="shake shake-hard" src="https://bulesky58.com/◯◯/wp-content/uploads/2017/06/CSShake.png">

CSShakeプラグインの指定クラスまとめ
クラス名     機能
1  shake     全ての基本。どの動きに対しても必ずこのshakeクラスはつける。
2  shake-hard     ブルブルの動きがハードになる！
3  shake-slow     ブルブルの動きがゆっくりになる。
4  shake-horizontal     ブルブルの動きが左右水平にしか動かなくなる。
5  shake-vertical     ブルブルの動きが上下垂直にしか動かなくなる。
6  shake-rotate     ブルブルの動きが円の動きになる。
7  shake-opacity     半透明になってブルブルする。
8  shake-crazy     クレイジーに動く！
9  shake-constant     常時ブルブルする。これを付けないと全てhoverした時だけブルブルする。
10  hover-stop     shake-constantクラスと一緒に使うとhoverした時だけブルブルが止まるようになる。

注目を集めたい時はこのCSShakeを使って簡単にブルブルを実装しちゃいましょう。
divで囲めばそこ全体を震えさせることも出来るので使い方しだいで面白いものが出来るかもですね。

[_ads_adsense]

[_show_snsbox]