ブルブル震えるjQueryの紹介 jRumble

2013/08/02

ブルブル移動する動作を実現

jRumbleというjQueryプラグインを使用して、画像や文字などをガクガクブルブル震える動作を行うことができます。
設定方法もとても簡単ですぐに出来るため、興味があれば試してみてください。

仕組みもシンプルで、JavaScriptでランダムな位置数を生成して、それをCSSのtopやleftに適用して移動させるという処理をsetIntervalを使って連続で行っています。

ダウンロード

jRumbleのサイトの「Download」をクリックしてファイルを取得します。
解凍すると、「jquery.jrumble.1.3.js」と「demo」があります。
細かい設定は、demo内のindex.htmlをご覧ください。
一通り設定内容について記載されています。

サンプル

マウスをのせてください。

上記のようにするためには以下のように設定します。
一番シンプルな方法を紹介しています。

まず、jQueryとjquery.jrumble.1.3.jsを読込みます。


<script type="text/javascript" src="js/https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jrumble.1.3.js"></script>

以下のようにJavaScriptを記述します。
今回は#demo1というIDに対して設定します。


$('#demo1').jrumble();

$('#demo1').hover(function(){
	$(this).trigger('startRumble');
}, function(){
	$(this).trigger('stopRumble');
});

HTMLを記述します。


<div id="demo1" style="padding:20px;background-color:#00FFFF;">ここが震えます。</div>

たったこれだけなんです!

  • このエントリーをはてなブックマークに追加
Related

PHPで動画の撮影日を取得

PHPで動画の撮影日を取得 概要 PHPからffprobeコマンドを実行し、動画の撮影日時を取得します。 コード $posted_at = ...

FullCalendarでGoogleカレンダーのようなUIを実装

jQueryプラグインFullCalendarのサンプル 概要 FullCalendarを使用して、GoogleカレンダーのようなUIを実装する使用例を...

PHP Laravel5.2でmulti-auth(複数テーブルでの認証)を実装

Laravel5.2でマルチ認証 概要 LaravelとはPHPの中で今最も伸びているフレームワークです。 処理速度が遅いなどありますが、かなり使い安く拡...

PHP 正規表現でIPアドレス形式の文字列か判定

正規表現でIPアドレスの入力チェック 概要 フォームで入力されたIPアドレスが正当な文字列か判定するためのバリデーション処理を実装します。 基本的...

rbenv環境でRuby on Railsのアプリケーションを一瞬で自動生成

アプリケーション構築時に最初に行う手順 概要 アプリケーションを作成するまでの手順を記載しています。 rbenvなどの環境が設定済と仮定して話を進めま...

Rails devise・authority・rolifyで権限付きの認証機能

devise・authority・rolify 概要 3つのGemを使用して、権限付き認証機能を実装します。 gem インストール Gemfile ...
トップへ戻る