App Brain

アプリやWebサービスなどオススメのものを発信していきます

記事の文字とか画像が震える((((;゚Д゚))))CSSプラグインの紹介+すぐ使える解説付き!!!

f:id:appknow:20170109124506p:plain

AMPで動かない可能性があるので、スマホの方は下のボタンからsafariなどで開き直して頂けると動きます。 画像とか文字とかがブルブル震えるエフェクトをつける「CSShake」をご紹介します。

elrumordelaluz.github.io

例えばこういうのとか!

w

簡単にできるようにわかり易く解説とデモを乗っけているので是非自分のブログで試してみてください!

【必須】使う前の準備

1つの記事のみで使いたい場合には記事のHTMLの一番上に下のコードを入れてください。 ブログ全体で使いたい場合はダッシュボード > 設定 > 詳細設定 > headに要素を追加 というところに追記しちゃってください。

<link rel="stylesheet" type="text/css" href="http://csshake.surge.sh/csshake.min.css">

震える種類は全部で10種類

通常のブルブル

<div class="shake shake-constant">ここに震えさせたいテキスト</div>

ハードなブルブル

<div class="shake-hard shake-constant">ここに震えさせたいテキスト</div>

ゆっくりなブルブル

<div class="shake-slow shake-constant">ここに震えさせたいテキスト</div>

小刻みなブルブル

<div class="shake-littleshake-constant">ここに震えさせたいテキスト</div>

横揺れのブルブル

<div class="shake-horizontal shake-constant">ここに震えさせたいテキスト</div>

縦揺れのブルブル

<div class="shake-vertical shake-constant">ここに震えさせたいテキスト</div>

左右が揺れるブルブル

<div class="shake-rotate shake-constant">ここに震えさせたいテキスト</div>

透明になるブルブル

<div class="shake-opacity shake-constant">ここに震えさせたいテキスト</div>

クレイジーなブルブル

<div class="shake-crazy shake-constant">ここに震えさせたいテキスト</div>

大まかに揺れるブルブル

<div class="shake-chunk shake-constant">ここに震えさせたいテキスト</div>

オプション

3種類あり

shake属性だけつけるとマウスを乗せたら震える

マウスを乗せたら震える

<div class="shake-slow shake-constant">ここに震えさせたいテキスト</div>

classにshake-constantを追加する。

常時ブルブル震える

<div class="shake-slow shake-constant">ここに震えさせたいテキスト</div>

classにshake-constant shake-constant--hoverを追加する。

常時ブルブル震えて、マウスを乗せたら止まる

<div class="shake-slow shake-constant shake-constant--hover">ここに震えさせたいテキスト</div>

マウスポインタをのせたら震えて、外したら止まる、(止まる所は適当) classにshake-freezeを追加

マウスを乗せたら震え始める。止まる場所は適当

<div class="shake-crazy shake-freeze">ここに震えさせたいテキスト</div>

画像の場合

テキストの部分を画像のimgタグに変更してあげれば大丈夫です!

<div class="shake shake-constant">  
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/appknow/20170109/20170109125804.png" height="100" alt="w">
</div>  

でも良いですし

<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/appknow/20170109/20170109125804.png" height="100" alt="w"  class="shake shake-constant">

classをimgに追加しても大丈夫です。

さいごに

なにかおもしろいことに使えそうですね!

それではまたおもしろいブログパーツやプラグインを見つけたら記事にします!