CSS_Shake_トップ画面

画像でブルブルさせる動きを付けたいならCSShakeプラグインを使えば超絶カンタン!

 
色んなWEBサイトを見ているとたまに画像やボタンが「ブルブルッ」と震えて注目を集めるようなものを見たことありませんか?

例えば何かの購入ページで「購入はこちら!」みたいなボタンがブルブルと震えて、、、いかにも押してもらいたそうなボタン。
見たことありませんか?

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

今日はそんな「ブルブル」をcsshakeというCSSプラグインを使って簡単に実装しちゃおう!というわけです。

プログラミングやWordPressを習得するのに一番近道な方法とは?

CSShakeプラグインのダウンロード

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

CSS_Shake_トップ画面

ダウンロードはページの一番下にあります。
CSS_Shake_ダウンロード画面

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

ちなみにSassでもダウンロード出来ますので、Sassで使いたい方はそちらからどうぞ。

 

CSShakeプラグインの使い方

使い方に関しては本当に簡単です。

実際にコードを見ていきましょう。

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

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

簡単にデモページを作ったので見てみてください。

 

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で囲めばそこ全体を震えさせることも出来るので使い方しだいで面白いものが出来るかもですね。

もし良かったらフォローとか購読して頂けると嬉しいです!╭( ・ㅂ・)و ̑̑ グッ !

follow us in feedly

コメントを送る

メールアドレスが公開されることはありません。

CAPTCHA