画像でブルブルさせる動きを付けたいならCSShakeプラグインを使えば超絶カンタン！
色んなWEBサイトを見ているとたまに画像やボタンが「ブルブルッ」と震えて注目を集めるようなものを見たことありませんか？
例えば何かの購入ページで「購入はこちら！」みたいなボタンがブルブルと震えて、、、いかにも押してもらいたそうなボタン。
見たことありませんか？
あの震えがどれほど効果的なのかは定かではないですが、少なくとも注目を集めるという点においては有効な部分もあるのではないでしょうか。
今日はそんな「ブルブル」をcsshakeというCSSプラグインを使って簡単に実装しちゃおう！というわけです。
プログラミングやWordPressを習得するのに一番近道な方法とは？
目次
CSShakeプラグインのダウンロード
まずはCSShakeのダウンロードページにいきましょう。
ダウンロードはページの一番下にあります。
ダウンロードボタンを押すと実際にダウンロードされるわけではなく、CSSファイルに飛ぶようになってますのでダウンロードボタンを右クリックして「リンク先を保存」やCSSファイルを全コピーするなりして持ってきましょう。
ちなみにSassでもダウンロード出来ますので、Sassで使いたい方はそちらからどうぞ。
CSShakeプラグインの使い方
使い方に関しては本当に簡単です。
①ダウンロードしたcsshake.cssを指定する
②ブルブルさせたい要素に指定されたclassを書く
③ブルブルする！
実際にコードを見ていきましょう。
①ダウンロードしたcsshake.cssを指定する
| 1 | <link href="cssshake.css" rel="stylesheet" /> |
②ブルブルさせたい要素に指定されたclassを書く
| 1 2 3 4 5 | // shakeクラスを指定 <img class="shake" src="https://blog.shuffleee.com/wp-content/uploads/2013/12/pei.png"> // shakeとshake-hardを指定 <img class="shake shake-hard" src="https://blog.shuffleee.com/wp-content/uploads/2013/12/pei.png"> |
簡単にデモページを作ったので見てみてください。
CSShakeプラグインの指定クラスまとめ
| クラス名 | 機能 |
|---|---|
| shake | 全ての基本。どの動きに対しても必ずこのshakeクラスはつける。 |
| shake-hard | ブルブルの動きがハードになる！ |
| shake-slow | ブルブルの動きがゆっくりになる。 |
| shake-horizontal | ブルブルの動きが左右水平にしか動かなくなる。 |
| shake-vertical | ブルブルの動きが上下垂直にしか動かなくなる。 |
| shake-rotate | ブルブルの動きが円の動きになる。 |
| shake-opacity | 半透明になってブルブルする。 |
| shake-crazy | クレイジーに動く！ |
| shake-constant | 常時ブルブルする。これを付けないと全てhoverした時だけブルブルする。 |
| hover-stop | shake-constantクラスと一緒に使うとhoverした時だけブルブルが止まるようになる。 |
まとめ
注目を集めたい時はこのCSShakeを使って簡単にブルブルを実装しちゃいましょう。
divで囲めばそこ全体を震えさせることも出来るので使い方しだいで面白いものが出来るかもですね。
