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

サイト内検索

最近の投稿

アイキャッチ
プラグイン自動更新ができるプラグインEasy Updates Manager

さて今回はワードプレスのプラグインの自動化ができるプラグインのご紹介です。自動で常に最新の状態に保つことが出来るのでとても便利です。 しかし、いろいろサーバーに入れたのですがどうもサーバーによ...

16 Dec 2018

アイキャッチ
ブラウザ上でデザインができるツールのCanva(キャンバ)のご紹介

簡単にプロ並みのデザインという感じで作成できてしまうデザインツールのご紹介です。 デザインのスキルはなくてもテンプレートから選ぶだけで、必要な素材をドラッグアンドドロップで簡単に出来てしまうツー...

11 Dec 2018

アイキャッチ
WordPress内でFTP操作ができるプラグインFile Managerのご紹介

今回はワードプレスプラグインFile Managerのご紹介です。これはどんなプラグインかと申しますと、ダッシュボードにFTPソフトが入ったようなプラグインです。FTPソフトがなくてもワードプレ...

26 Nov 2018

アイキャッチ
WordPressでPHPの値をJavaScriptファイルへ渡す方法

今回はワードプレスの値をJavaScriptに渡す方法です。ワードプレスからじゃなくてPHPからJavaScriptへ値を渡す方法もご紹介します。 PHPの値をJavaScriptで処理を行う...

22 Nov 2018

アイキャッチ
アイキャッチ画像がない場合に記事内はじめの画像をアイキャッチにする方法とリンク先画像取得-WordPress

今回はワードプレスのアイキャッチです。記事内はじめの画像を取ってくる方法は結構出回っているので、リンク先の画像を撮ってくる方法をプラスしたやり方になります。 記事内はじめの画像を取得する方法は...

10 Nov 2018

著者

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

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

タグクラウド

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