0

スクロール時にフェードする画像を取得しようとしています。これは私が行ったことです。

ただし、ここでわかるように、下のテキストとメニューは画像から離れすぎています。ブラウザを小さくすると、距離が長くなります。

スクロール時にテキストが画像に重なる方法を維持したいと思います。これに似たスタイル。

JSFiddleがないことをお詫びします–それを機能させることができないようです。

これで変更しようとしましたが、画像上でスクロールするテキストが失われます（FearTheGrizzly refなど）。

つまり、上部の画像の近くにテキストを配置したいと思います。ブラウザと一緒に動かしてもらいます。

4

1 に答える 1

0

問題は、ブラウザのサイズを変更すると背景画像の高さが変わることです (が原因でbackground-size:100% auto;、要素自体は更新されません。背景画像だけでなく、CSS で実際に div のサイズを変更することでおそらくこれを修正できますが、仮定しましょうこの場合、残りのコンテンツが適切な場所に表示されるように、JavaScript を使用して div のサイズを変更する必要があります。

$(document).ready(function() {
    $homeDiv = $('.home'); 
    $(window).resize(); //call this onload to make sure the div is initially right
});
$(window).resize(function() {
    ($homeDiv).height($(window).width()/1440 * 600);
    console.log($(window).width()/1440 * 600);
});

もちろん、フェードが期待どおりに動作しない可能性があるため'opacity'、JS の行も変更します。

 'opacity' : 1 - windowScroll / ($(window).width()/1440 * 600 - 30)

これは、一貫した寸法を持つ画像に依存します。これを知らなくてもやり方はあると思いますが、これが一番簡単です。

于 2012-08-10T21:34:08.543 に答える