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


コメント