複数の各要素ごとにスライドアニメーションを設定できるjQueryプラグイン「FractionSlider」をご紹介します。各要素ごとに異なるアニメーションを設定できたり、とても面白い動きを与えることができます。ユーザーの目線を集中させることができそうですね。
[ads_center]
使い方
jQueryとダウンロードしたプラグインを読み込みます。
<link href="fractionslider.css" rel="stylesheet" /> <script type="text/javascript" src="jquery-1.9.0.min.js"></script> <script type="text/javascript" src="jquery.fractionslider.js"></script>
マークアップはこんな感じで。
<div class="slider">
<div class="slide"><!-- 1番目のスライド --></div>
<div class="slide"><!-- 2番目のスライド --></div>
<!-- ・・・中略・・・ --->
</div>
各要素のスライドし終わったあとの最終的な位置を設定するにはdata-positionをセットします。/p>
<img src="画像パス" data-position="100,100" />
左からスライドさせるか右からスライドさせるかを決める場合にはdata-inを使用します。値はleftかrightを指定すればOKです。
<img src="画像パス" data-in="left">
inの時とは逆にout時はdata-outを使用します。
<img src="画像パス" data-out="left">
他にもdata-delayなどもセットすることができます。
で、あとはプラグインをスタートさせます。
jQuery(window).load(function(){
$('.slider').fractionSlider();
});
オプションも色々あるので自分のサイトに合わせてカスタマイズしていくとよさそうです。
FractionSlider
