CSShakeの使い方と紹介

CSShakeの使い方と紹介

  • 2016-05-21  最終更新日:2016-05-22

今回はブルブル震えて注目してしまう動きCSShakeをご紹介します。

jQueryのプラグイン jRumble とかでもありますが今回は簡単に導入できて実装できるCSSでのご紹介です。

CSSShake公式サイトからダウンロードして使います。こちらの公式サイトにも使い方は載っておりますが、簡単に説明します。

インストールはnpmかbowerよりできます。公式サイトからダウンロードしても良いです。


スポンサーリンク


CSShake

動きは全部で10種類なので実装も簡単です。

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

cssを読み込んでから下記の通りdivのcsshakeクラスで囲ってやるだけです。動きはデモを見ていただければと思います。

<div class="shake">ベーシック</div>
<div class="shake-hard">ハード</div>
<div class="shake-slow">スロー</div>
<div class="shake-little">リトル</div>
<div class="shake-horizontal">横揺れ</div>
<div class="shake-vertical">縦揺れ</div>
<div class="shake-rotate">斜め</div>
<div class="shake-opacity">透過</div>
<div class="shake-crazy">クレイジー</div>
<div class="shake-chunk">チャンク</div>

⇒デモを見てみる


∞Tadashi Suyama∞

css web shake シェイク
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

サイト内検索

最近の投稿

アイキャッチ
ワードプレスで最強のバックアッププラグインは・・・

あってて良かったバックアップデータということが多々ある今日この頃でございます。 多くの利用者がいるワードプレスなんですが、実は多いが故に狙われてしまうことも多いのです。壊れてしまったり、ウィル...

24 Feb 2018

アイキャッチ
fontawesome5の使い方

アイコンフォントで最も有名なfontawesomeですが5になってますます使い勝手が向上しました。推奨はJSを使ったSVGと表示となっております。Webで最も人気のあるアイコンセットをFontA...

18 Feb 2018

アイキャッチ
自作アイコンをSVGでの表示方法

そもそもSVGとはScalable Vector Graphics(スケーラブル・ベクター・グラフィックス)で、拡大縮小、変形してもキレイなままでぼやけず荒れないXMLベースの画像のことです。W...

13 Feb 2018

アイキャッチ
なりすまし・フィッシングメール対策のDMARCとは

DMARC(ディーマーク)とは迷惑メールの送信者から偽装を防ぐ仕組みになります。まだ対応サーバーは少ない気がします。 その仕組みに当たってSPFとDKIM(ディーキム)も知る必要があります。こ...

03 Feb 2018

アイキャッチ
いつもの定型文をDashに登録、便利なスニペット機能

Dashとは、ドキュメントマニュアルとコードスニペットマネージャになります。 サポートされているマニュアルは150の以上あり、オフライン環境でのドキュメントを検索することができます。そしてエデ...

27 Jan 2018

著者

ウェブエンジニアのSUYAMAのブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

タグクラウド

css web shake シェイク
フッターイメージ