私はスイッシュな B&B ウェブサイトを構築するためのブリーフを持っています.彼らは私がカバー画像としてコーディングした全幅の背景画像を望んでいます.
それ以来、彼らは私に戻ってきて、背景画像が各ページのいくつかの画像を回転させたいと言っています. 背景画像を遅延読み込みし、15 秒ごとに素敵なトランジションを作成したいと思いますが、最善のアプローチや、これを実行してメディア クエリを使用する方法についてはわかりません。何かの経験はありますか?同様に、または良いアプローチについてアドバイスを提供できますか?
クロスブラウザー (ie8 plus) で動作する必要があり、理想的には帯域幅の使用が制限されています..
乾杯ポール
この機能を IE8 に準拠させる必要がある場合、メディア クエリは CSS3 であり、IE8 では処理できないため、使用できません。
できることは、jQuery アニメーションを使用して、画像の不透明度を操作してトランジションを生成することです。次の Web サイトでそのような例を見ることができます: http://www.mymms.co.uk/occasions/wedding.aspx 左のメニュー項目にカーソルを合わせると、背景画像が変わります。
これは、背景画像ごとに 1 つの div を使用して作成され、すべての div が同じ位置に表示され (重ね合わされ)、前景画像が 100% の不透明度から 0% の不透明度にフェードし、その間に背景画像が 0% の不透明度からフェードします。不透明度 100% まで。素敵なトランジションを得ることができ、フェード時間を設定することもできます: http://api.jquery.com/fadeTo/
100% の不透明度の画像を一番上に表示するには、それに応じて z-index を設定する必要がある場合もあります。
さらに、遷移が発生したときのネットワーク ラグを回避するには、ページにタグを配置する必要がありますが、それらを表示することはできません (display:none)。これにより、画像がプリロードされ、滑らかなトランジションが得られます。
それが役立つことを願っています。