2

間違ったツリーを完全に吠えている可能性がありますが、div background-image 要素を使用して視差スクロール画像を作成できますか?

私がやりたいことは、現在、テキスト効果のロールオーバーを含む画像を含むいくつかの DIV がありますが、背景画像で視差を使用しているため、すべてのサイト画像で 3D テーマを維持したいということです。

編集:たとえば、このページの青いボックスを作成することは可能ですか:

www.parkhallmanor.co.uk/new

視差効果を使用して別々の画像をスクロールしますか?

4

1 に答える 1

14

はい、可能です。

おそらくご存じのように、通常の視差効果は body タグに bg 画像を配置し、スクロール時に背景オフセットを変更するか、その上にある div をスクロール レートよりも遅く移動します。

各ウィンドウに個別の画像が必要なため、背景オフセット アプローチを使用する必要があります。各 div は、CSS では次のようになります。

#div1 {
    background: url('/ui/div1bg.jpg') 0 -800px no-repeat;
}

はbackground-position0 -800pxです。ウィンドウが下にスクロールするにつれて、その 2 番目の値を徐々に増やして背景を下にシフトし、遠近感をシミュレートします。シミュレートされた視点では、遠くのものはゆっくりとあなたを通り過ぎ、近くのものは素早く動きます。

したがって、スクロールイベントを取得するだけです：

$(window).scroll(function () {
    parallax();
});

使用するメトリクスを収集します。

function parallax() {
    var ev = {
        scrollTop: document.body.scrollTop || document.documentElement.scrollTop
    };
    ev.ratioScrolled = ev.scrollTop / (document.body.scrollHeight - document.documentElement.clientHeight);
    render(ev);
}

変更をレンダリングします。

function render(ev) {
    var t = ev.scrollTop;
    var y = Math.round(t * 2/3) - 800;
    $('#div1, #div2, #div3').css('background-position', '0 ' + y + 'px');
}

したがって、t 変数が増加する (ユーザーが下にスクロールする) と、画像は 2/3 の割合でシフトします。-800px から始まり、ユーザーが 1200px までスクロールすると、徐々に 0 になります。ページが 1200px よりも長く、要素がまだ表示されている場合は、計算を調整する必要があります。その後、コードは画像の上部を越えてスクロールするためです。ただし、その時点までに要素がすでに通過している場合は、無視できます。

明らかに、div と画像に適切な効果を得るために、そこで数値を調整する必要があります。

たまたまページの高さの合計を基準にしたい場合は、次のように .ratioScrolled という 2 番目のメトリックを使用できます。

var y = Math.round((1 - ev.ratioScrolled) * -100);

したがって、たとえば、高さ 150px の div と高さ 250px の画像がある場合、上記は完全に機能します。-100px (シフトアップ) で開始し、ページがスクロールするにつれて、たまたまどれだけ長くても、 0px で終了します (シフトなし - 下の 100px が切り取られます)。

于 2013-03-17T20:47:26.030 に答える