- 2010年6月8日 8:03 PM
- jquery
Flashを使わずに、FlashのようなアニメーションをjQueryとプラグインを使って実現する。
使わせてもらったのはこのワークショップのFANCY TRANSITIONS EFFECTS。
DOWNLOADのリンクからjQuery本体とプラグインのjqFancyTransitions.1.7.min.jsをダウンロードして使用。あとはサンプル用の画像を三点用意し、表示するためのhtmlページを作成する。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Fancy Transitions Effects</title>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jqFancyTransitions.1.7.min.js" type="text/javascript"></script>
</head>
<body>
<div style="float:left;">
<h2>effect: curtain</h2>
<div id='example1'>
<img src='img1.jpg' alt='img1' />
<img src='img2.jpg' alt='img2' />
<img src='img3.jpg' alt='img3' />
<script>
$('#example1').jqFancyTransitions({width:375, height:500, effect:'curtain'});
</script>
</div>
</div>
<!-- パラメータをいくつか追加。stripやdelay、navigationやlinksを -->
<div style="float:left;">
<h2>effect: wave</h2>
<div id='example2'>
<img src='img1.jpg' alt='img1' />
<a href="http://showzine.info/wd/"></a>
<img src='img2.jpg' alt='img2' />
<a href="http://showzine.info/blog/"></a>
<img src='img3.jpg' alt='img3' />
<a href="http://showzine.info/"></a>
<script>
$('#example2').jqFancyTransitions({width:375, height:500, effect:'wave', strips:4, delay:3000, navigation:true, links:true});
</script>
</div>
</div>
<br style="clear:left;" />
<!--パラメータオプション
effect: '', // wave, zipper, curtain
width: 500, // width of panel
height: 332, // height of panel
strips: 20, // number of strips
delay: 5000, // delay between images in ms
stripDelay: 50, // delay beetwen strips in ms
titleOpacity: 0.7, // opacity of title
titleSpeed: 1000, // speed of title appereance in ms
position: 'alternate', // top, bottom, alternate, curtain
direction: 'fountainAlternate', // left, right, alternate, random, fountain, fountainAlternate
navigation: false // prev and next navigation buttons
links: false // show images as links
-->
</body>
</html>
左側の「effect: curtain」はとくにパラメータを追加せずにデフォルトで使用したもの。画像のサイズとeffectの指定だけをしている。
右側の「effect: wave」は画像が切り替わる速度（delay）や、切り替わる時の短冊？の数（短冊の幅サイズ）、effectを変更。さらに画像ひとつひとつにリンク先を追加し、画像の前後のナビゲーションも追加している。
自分で追加・変更可能なパラメータのオプションは以下のとおり。
effect: '', // wave, zipper, curtain width: 500, // width of panel height: 332, // height of panel strips: 20, // number of strips delay: 5000, // delay between images in ms stripDelay: 50, // delay beetwen strips in ms titleOpacity: 0.7, // opacity of title titleSpeed: 1000, // speed of title appereance in ms position: 'alternate', // top, bottom, alternate, curtain direction: 'fountainAlternate', // left, right, alternate, random, fountain, fountainAlternate navigation: false // prev and next navigation buttons links: false // show images as links
限定されたひとつの表示領域で複数のイメージを切り替えて表示させたい場合、わざわざFlashを使わなくても、この程度の見せ方ならこれで十分かなと思ってメモしておく。
詳しくは前述のワークショップおよびデモページを参照のこと。
コメント:0
トラックバック:0
- この記事のトラックバック URL
- http://showzine.info/blog/2010/06/flash%e3%82%92%e4%bd%bf%e3%82%8f%e3%81%9a%e3%81%abflash%e3%81%ae%e3%82%88%e3%81%86%e3%81%aa%e3%82%a2%e3%83%8b%e3%83%a1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e5%8a%b9%e6%9e%9c%e3%82%92jquery%e3%81%a7.html/trackback
- トラックバックの送信元リスト
- Flashを使わずにFlashのようなアニメーション効果をjQueryで実現する - SHOWJIN*BLOG より