テレビなどではよく見かける、2枚の写真を並べて使用前/使用後といった見せるやり方。
その様なビフォーアフターの表現をjQueryを使ってドラッグ操作によって実現することが出来る
「jQuery Before/After Plugin」がおもしろかったので紹介。

jQuery Before/After Plugin


Catch My Fame » jQuery Before/After Plugin


デモはこちら:jQuery Before/After Plugin Demo

重ねられた2枚の画像に対して、ドラッグでスライドできるバーを左右に動かすことで
背面の画像を表示したり、前面の画像を表示したり、切り換えることが可能になります。

HTML側では下記の様に<img>タグで画像を指定します。

◆HTML
<div id="container">
	<div><img alt="before" src="before.jpg" width="600" height="366" /></div>
	<div><img alt="after" src="after.jpg" width="600" height="366" /></div>
</div>

そしてjQueryファイルとjQueryUIに加えてビフォーアフタープラグインの
「jquery.beforeafter.js」を読み込んでスクリプトを実行させます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.beforeafter.js"></script>
<script type="text/javascript">
$(function(){
	$('#container').beforeAfter();
});
</script>

実行後はHTMLで指定している<img>画像が
<div>の背景画像に変わり、ドラッグでスライドすることで
前面に配置された<div>のwidth幅を変化させて表現している構成のようです。

使いどころは限られますがちょっとおもしろい演出を
組み込むことが出来るプラグインかな、と思います。

このプラグインと同様の動きを使って衝撃的な見せ方をしているページも。
ABC News – Japan Earthquake: before and after

ご参考までに。。。

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

Related Posts

Comments (1)

  • Julissa | 2011.09.30 2:45

    In the complicated world we live in, it’s good to find simple slotiouns.







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

jQueryで2枚の画像をビフォーアフターで魅せる「jQuery Before/After Plugin」

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner