ブルブル震える。ふなっしー好きにはたまらん狂気のCSSアニメーション

2015年6月18日
カテゴリー ツール

ふなっしーと風景

jQueryやCSSで、サイトの雰囲気をすこし賑やかな感じにしたいなあ。アニメーション効果を探していたところ、「こ、これは?」なCSSライブラリを見つけました。

使い方は非常に簡単。対象はなんでもOK。こんなふうに、CSSでClassにひとことふたこと付け加えるだけで、ブルブル震えてくれます。


<div class="shake shake-constant"></div>

動きはまるで「ふなっしー」

スマホの人は、スクロール中は動かないので、少しずつスクロールを止めて見てください。

フナ

なぜ、フナ?

アニメーションの動きがまるで「ふなっしー」なので。本当はふなっしーのイラストや写真を例に紹介したかったのですが、版権的にヤバいかなーと思って。

動きかたには、いくつか種類があります。上のは「垂直」。CSSで指定すれば、「マウスを重ねるとストップする」、あるいはその逆、「マウスオンでブルブル震えだす」も可能です。

下のは「ハード」。文字通り、ハードに震えます。

まな板のフナ

ビビってます。

まな板のフナ

アニメーションを工夫すれば、サイトの見た目を楽しくするだけでなく、ストーリーも創出できます。

ヤバいぞ、フナ

怖がるフナ

ヤられる前にヤれ

仲間を引き連れフナの大群、ネコを襲う。

フナ04

フナ03

フナ02

フナ01

驚く猫

ネコ、絶体絶命!

驚く猫

ビーム

くっそ、反撃だ

ビーム

ビーム

しまった、あらぬ方向へ

震える犬

逃げるイヌ

震える犬

飼い主のもとへ

飼い主は、まさかのあの人

会いたくて会いたくて震えている最中でした。

ちなみに、この写真は「amazonアフィリエイト」で提供されているもの。なので、著作権的な問題はございません。

ってことは、なんだ、ふなっしーの画像もAmazonのをつかえるなっしー。

じゃん!

それでは実装方法

css shake

冒頭でもいったとおりすごく簡単。上記リンク先でダウンロードできるCSSファイルを読み込みます。


<link rel="stylesheet" type="text/css" href="csshake.css">

そのあと、ブルブルさせたい要素へ揺らし方をCSSで指定します。


<div class="shake shake-xx"></div>

これだけでOK。以下、鮒寿司を使って、揺らし方を紹介します。

え、鮒寿司?

知らないんですか。フナを使ったお寿司ですよ。ものすごく臭くて、これは他の臭い食べ物との比較表ですが、

え、揺れてて見えない? そうです。アニメーションは使いどころが肝心。それを知らしめるために、悪しき例をあげてみました。

臭いレベルが気になる人は、出典はwikipediaなので、そちらでどうぞ。

それじゃ、揺れかたのサンプルを続けますね。

ノーマルシェイク

鮒寿司

ハード

鮒寿司

スロー

鮒寿司

リトル

鮒寿司

水平

鮒寿司

垂直

鮒寿司

回転

鮒寿司

透過

鮒寿司

クレイジー

鮒寿司

おわり。

目がチカチカする。

シェアしてくれると嬉しいです!(コメントも喜ぶよ

あなたにはこんな記事もおすすめ!
ん?最新情報を見逃さない方法!?
わざわざブログに来なくても、自動的にウェブさえの更新情報を受け取ることができます。「お、いいね!」と思われた人は、SNSのアカウントをフォローするか、RSSリーダーへ登録、どれでも都合のいい方法で受け取ってくださいね! しばらく休止していたウェブさえマガジンも最近再開しました。メールで受信できます。受信は無料で、いつでも解約できるので気軽に登録してみてください。
ウェブさえマガジン
  • facebook
  • twitter
  • google

コメントも大歓迎!

Top