CSShakeの使い方と紹介 - ITS

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>

⇒デモを見てみる

Web制作者のためのCSS設計の教科書モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

posted with ヨメレバ

谷拓樹インプレス 2014-07-24

楽天ブックス

∞Tadashi Suyama∞

css web shake シェイク

サイト内検索

最近の投稿

アイキャッチ

Perlで500エラー！原因は文字コードだけでなく改行コード

あまりcgiは使いたくないのですが使わざるを得ない時があります。仕方なく設置するのですがエラーが出ちゃうんです。なんか知らないけど。ありがちなのがパーミッションとかパスが問題になるんのですけど...

19 Feb 2022

アイキャッチ

WordPressの標準メールアドレスの変更方法

今回はワードプレス専用のアドレス変更方法をご紹介します。ワードプレスのアドレスはwordpress@~という形で送られてきますが変更可能です。 functions.phpに記載するのですがプラグ...

12 Feb 2022

アイキャッチ

LibSass（node-sass）からDartSassに移行の手順

Sassの遷移は多すぎる今日この頃 Ruby Sass→LibSass→DartSass（いまここ） Ruby SassはSassの最初の実装でしたが、2019年3月26日にサポートが終了しま...

22 Jan 2022

アイキャッチ

明けましておめでとうございます

明けましておめでとうございます。本年も何卒よろしくお願いいたします。年末年始は雪でしたね、そこまで積もっていませんが。 {% include adsensearticle.html...

10 Jan 2022

アイキャッチ

そろそろvuejs始める

最近はjQueryよりvueで書いた方が楽ではないかと思い学習中です。そもそもVuejsはドキュメントが日本語対応なので試しやすいし情報も豊富なので学習しやすいです。 3大フレームワークと呼...

02 May 2021

ブログアーカイブ

ブログカテゴリー

著者

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

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

タグクラウド

css web shake シェイク

フッターイメージ