私の目標は、ユーザーがウィンドウをどのように調整しても、ブラウザ ウィンドウ全体に広がる画像バーを中央に配置することです。それは簡単ですが、私が望んでいるのは、画像が「中央」のままで、一定のループで定期的に右にスクロールすることです。
スクロールバーを作成せずに画像を好きなだけ広くすることができるので、今は背景画像でこれを達成しようとしています。さらに、水平方向に繰り返す組み込みの css 機能は、「ループ」効果を実現する簡単な方法です。
背景画像をアニメーション化するために、次の jquery コードを使用しています。
function scrollingIMG() {
$('#my_div').delay(5000).animate(
{backgroundPosition:'+=200px 0'},
500,
'linear',
function() { scrollingIMG();
});
};
残念ながら、このコードが起動された瞬間に背景が中央に配置されなくなり、ブラウザー ウィンドウが調整されたときにサイト コンテンツの残りの部分と同期して移動しなくなります。背景画像を残りのコンテンツと同期させながら、右にシフトする簡単な css/jquery コマンドがありませんか?