1

Web ページの垂直スクロールの視差効果を調べていましたが、調査した結果、技術的には視差効果が必要かどうかわかりません。

私が見た限りでは、ほとんどの視差効果は、多くの背景画像が転がり落ちたり、巨大な画像が繰り返されたりして無限にスクロールできることを前提としています。

私がやりたいことは、スクロール バーがページの下部に到達したときに、2 つの DIV の背景を背景画像で埋めることです。背景画像を引き伸ばしたくないことに注意してください。これらの画像の垂直方向の高さがほとんどの人のビューポートよりも大きくなり、垂直方向の位置が変化するという効果が得られると想定しています。ユーザーのスクロールバーが一番上にある場合、一定量の背景が表示され、ユーザーが下にスクロールすると背景のスペースを埋めるために垂直に移動します。

私が達成したい効果の視覚的な説明については、下の画像を参照してください。

ここに画像の説明を入力

ビューポートの高さは、内側の DIV 内のコンテンツの長さによって異なります。

私の問題は、私がやろうとしているのが視差効果ではない場合、それを他に何と呼ぶべきか分からず、それを説明して検索しようとすると、視差効果のチュートリアルを提供するページに戻ってくることです. そのため、用語の不足に悩まされてきました。

スクロールバーの位置に応じて背景の垂直位置を制御する方法を誰かに教えてもらえれば、それは大歓迎です。これが CSS だけで実現できれば素晴らしいのですが、Javascript が必要になると思います。jQuery ソリューションも私にとってはうまくいきます。

アップデート：

コメントで提供された用語を使用して検索した後、外側の DIV に背景画像を取得して、次のコードで必要なことをほぼ実行しました。

$(window).scroll(function () {
var yPos = $("#outerDiv").height() - ($("#outerDIV").height() * ($(window).scrollTop() / $(window).height()));
document.getElementById('outerDIV').style.backgroundPosition="0px " + yPos + "px";
});

スクロールに対して背景画像を正しい方向に移動しますが、欠けているのはその動きをビューポート内に制限することです。ビューポートと DIV のサイズに基づいて適切な比率を取得することは、私の数学的能力を少し超えていることが証明されています。

4

2 に答える 2

1

私が達成したいことは、特別なプラグインがなくても可能であることがわかりました。慎重に考え抜かれた数学だけです。少し jQuery 構文を使用しましたが、厳密には必要ではないと思います。

以下のコードには多くの注記が含まれているため、大部分が説明になっていることを願っています。要約すると、スクロールが上にあるときの背景画像の位置と、スクロールバーが下にあるときの位置を見つけるだけでよく、スクロールバーの動きのパーセンテージを使用してこの 2 点の間のどこにいるのかを調べます。もちろん、スクロールバーの全体の高さと、DIV がページに表示される場所と他のいくつかの調整の違いを考慮する必要があるという点で、それよりも少しトリッキーですが、私が行ったことの詳細は次のとおりです。下。

ここで行ったことは、質問で説明した「外側の DIV」のためだけです。私が説明した「内側の DIV」のように背景を移動するには、おそらくいくつかのパラメーターを逆にして、コードを変更する必要があります。私はまだそれを行っていませんが、簡単な作業のようです。

他の人がこのコードが役立つことを願っています。より効率的または改善する方法について提案がある場合は、お知らせください。

function moveBG(){
   // imageHeight is not the total height of the image,
   // it's the vertical amount you want to ensure remains visible no matter what.
   var imageHeight = 300;
   // Get the maximum amount within the DIV that the BG can move vertically.
   var maxYPos = $("#outerDIV").height() - imageHeight;
   // Get the amount of vertical distance from the top of the document to
   // to the top of the DIV.
   var headerHeight = document.getElementById("outerDIV").offsetTop;
   // Calculate the BG Y position for when the scrollbar is at the very top.
   var bgTopPos = $(window).height() - headerHeight - imageHeight;
   // I don't want the image to wander outside of the DIV, so ensure it never
   // goes below zero.
   if (bgTopPos < 0)
   {
      bgTopPos = 0;
   }
   // Calculate the BG Y position when the scrollbar is at the very top.
   var bgBottomPos = $(document).height() - $(window).height() - headerHeight;
   // To prevent the BG image from getting cut off at the top, make sure
   // its position never exceeds the maximum distance from the top of the DIV.
   if (bgBottomPos > maxYPos)
   {
      bgBottomPos = maxYPos;
   }
   // Subtract the top position from the bottom, and you have the spread
   // the BG will travel.
   var totalYSpan = bgBottomPos - bgTopPos;
   // Get the scrollbar position as a "percentage". Note I simply left it as a 
   // value between 0 and 1 instead of converting to a "true" percentage between
   // 0 and 100, 'cause we don't need that in this situation.
   var scrollPercent = ($(window).scrollTop() / ( $(document).height() - $(window).height()));
   // The percentage of spread is added to the top position, and voila!
   // You have your Y position for the BG image.
   var bgYPos = bgTopPos + (Math.round(totalYSpan * scrollPercent));
   // Apply it to the DIV.
   document.getElementById('outerDIV').style.backgroundPosition="0px " + bgYPos + "px";
}
// Place the BG image correctly when opening the page.
$(document).ready(function() {
   moveBG();
});
// Make it update when the scrollbar moves.
$(window).scroll(function () {
   moveBG();
});
于 2013-07-13T07:56:54.047 に答える