画像をクロスフェードさせながらスライドショー【jquery-CrossSlide】

以前にヘッダーのメーニュー部分を変更したところ、
メニューの下層部分が、フラッシュの裏側に入り込んでしまって
見えない状態に・・・
何かフラッシュ意外で出来ないかな~と探していたら、
お!!と言うサイトを発見
画像をクロスフェードさせながら変更
http://www.gruppo4.com/~tobia/cross-slide.shtml

試して見たのですが、Firefox・Google Chromeでは上手く行ったのですが、
IEの6、7でフラッシュと同じ状況に・・・
結局使わなかったのですが、そのうちどこかで使うかな??
と備忘録です(笑)
上記サイトより、jquery.cross-slide.jsをダウンロード。
※jquery.jsも必要

<script type='text/javascript'>
$(function() {
$('#gallery2').crossSlide({
fade: 2 //フェイドスピード 数が大きい方が遅い
}, [
{
src:  'img/1.jpg',
from: '30% 50% 1.5x ', //開始地点 '右○% 左○%  倍率1.5倍
to:   '100% 50%', // 終了地点 '右○% 左○%
time: 4//スピード
},
{
src:  'img/2.jpg',
from: '100% 50%',
to:   'bottom right 1.5x', //右下で1.5倍で終了
time: 4
}
]);
});
</script>
<div id="gallery2">Loading...</div>
$('#gallery2')とid="gallery2"はそろえる

    
参考サイト様有り難うございました。
JQueryプラグイン「CrossSlide」で思い出に浸る系のスライドショーを実装(サンプル・使い方付)
CrossSlide – A jQuery plugin to create pan and cross-fade animations
             


コメント