jQuery body background-image rotator

私が現在デザインしているウェブサイトについては、一連の画像を回転させて体の背景を作りたいと思っています。私はfadeIn（）とfadeOut（）関数を使用して複数の方法を試しましたが、ボディ内の分割の不透明度に影響するようです。私もbgStretcherを使ってみましたが、これは外観上の問題を引き起こし、ウェブサイトをゆっくりと不安定にしました。jQuery body background-image rotator

私は、画像をフェードインまたはフェードインするのが好きです。ヘルプをいただければ幸い、私は現在、変更されている

Here's a link to the website スクリプトファイルは、/ JS /ディレクトリの下にbackground.jsと呼ばれています。ファイルは現在のところ実験的なものとしてコメントアウトされています。 2枚の現在の背景画像はここで、「画像/ BG/bg1.jpg」と「画像/ BG/bg2.jpg」

ある私が働いて取得しようとしています私の現在のコードです：

$(document).ready(function() { 
    setInterval(switchImage, 5000); 
    switchImage(); 

}); 

function switchImage() 
{ 
$('body').css("background-image", "url(../images/bg/bg2.jpg)").fadeIn(1000); 
$('body').css("background-image", "url(../images/bg/bg1.jpg)").fadeOut(1000); 
}

背景画像間の移行方法を理解できたら、一連の画像を変更するための条件を簡単に追加できます。このjQueryのプラグインと非常にシンプル

乾杯、デーンウィルソン

出典

2012-06-02 Dane Wilson

私たちの助けを必要とする関連コードは、ここにあなたの質問に*掲載してください。そして、理想的には[ライブデモ]（http://jsfiddle.net/）を投稿してください。そうしないと、問題が解決されてもこの問題は解決されません（リンク先のページから問題コードが修正/削除されるため）。）。 –

「スライドショーにバックストレッチを使用して」デモでjQuery Backstretch はそれのためにコードスニペットです。

出典

2012-06-02 11:56:04

これは、私が上で述べたbgStretcherと同じように機能しましたが、コードはより小さく、より良くなりました。私はそれが遅く、不安定になる原因を突き止めました。それは、レンダリングの問題を引き起こす透明なプロパティを持つオーバーレイPNGを使用しようとしていたためです。私はパターンオーバレイをあらかじめ適用して画像を保存することでこれを修正しました –

これはcss3のみで行うことができます。私はすぐにフィドルを投稿します。

編集：キーフレームとCSS3のバックグラウンドサイズのアニメーションを作成しようとしましたが、明らかにあまりにもうまく一緒に作業したくない（ちらつき）。おそらくjQueryを調べるほうがいいでしょう。

出典

2012-06-02 12:07:39

jQuery body background-image rotator

答えて

関連する問題