0

私はこの問題の解決策を調べて尋ねましたが、今のところうまくいきません。誰かが私を助けてくれることを願っています。

しばらく前に見つけた [this][1] チュートリアルに基づいて、視差効果に取り組んできました。マウスをどこに動かしたかに応じて、すべての要素が左右に移動するという点で、本来あるべきことを行います。可能であれば、マウスの位置に応じて左右にスムーズにスクロールするように調整したいと思います。今のままでは、マウスが動くと動くだけです。マウスが中心に対してどこに配置されているかに応じて、左または右の特定の幅のスペースに対して設定された速度で連続的にスクロールするように変更したいと思います。

これは私がこれまでに持っていたコードです。これも、上でリンクしたチュートリアルの最初のセクションと同じように機能します。

var headerDiv = document.getElementById("header");

var image1Div = document.getElementById("image1");
var image2Div = document.getElementById("image2");
var image3Div = document.getElementById("image3");
var image4Div = document.getElementById("image4");

var headerDivHeight;
var canStartParallax = false;
var canPositionDivsVertically = true;

// Detect if the browser is IE or not.
// If it is not IE, we assume that the browser is NS.
var IE = document.all?true:false

// If NS -- that is, !IE -- then set up for mouse capture
if (!IE) document.captureEvents(Event.MOUSEMOVE)

// Set-up to use getMouseXY function onMouseMove
document.onmousemove = getMouseXY;

// Temporary variables to hold mouse x-y pos.s
var tempX = 0;
var tempY = 0;

var objectArray = new Array();

window.onload = function()
{
    showAllOfTheContent();

    headerDivHeight = headerDiv.offsetHeight;

    fillObjectArray();
    setimage1ToTransparent();
    positionDivs();

    turnOffPreloaderDotAnimation();
    objectAnimation();
}

function showAllOfTheContent()
{
    document.getElementById("content").setAttribute("class", "");
}

function fillObjectArray()
{
    var image1X = { getX: function() {return 0.5 * windowWidth + 50} };
    var image1Y = 10;
    var image1Factor = 0.0;
    var image1Array = new Array();
    image1Array.push(image1Div, image1X, image1Y, image1Factor);
    objectArray.push(image1Array);

    var image2X = { getX: function() {return 0.5 * windowWidth - 202} }; //position div from half width of the page
    var image2Y = 0;
    var image2Factor = 0.20; //parallax shift factor, the bigger the value, the more it shift for parallax movement
    var image2Array = new Array();
    image2Array.push(image2Div, image2X, image2Y, image2Factor);
    objectArray.push(image2Array);

    var image3X = { getX: function() {return 0.5 * windowWidth - -160} };
    var image3Y = 23;
    var image3Factor = 0.60;
    var image3Array = new Array();
    image3Array.push(image3Div, image3X, image3Y, image3Factor);
    objectArray.push(image3Array);

    var image4X = { getX: function() {return 0.5 * windowWidth + 50} };
    var image4Y = 60;
    var image4Factor = 1.0;
    var image4Array = new Array();
    image4Array.push(image4Div, image4X, image4Y, image4Factor);
    objectArray.push(image4Array);

    var image5Div = document.getElementById("image5");
    var image5X = { getX: function() {return 0.5 * windowWidth + 500} };
    var image5Y = 400;
    var image5Factor = 0.85;
    var image5Array = new Array();
    image5Array.push(image5Div, image5X, image5Y, image5Factor);
    objectArray.push(image5Array);
}

// Main function to retrieve mouse x-y pos.s

function getMouseXY(e)
{
      if (IE) { // grab the x-y pos.s if browser is IE
        tempX = event.clientX + document.body.scrollLeft
        tempY = event.clientY + document.body.scrollTop
      } else {  // grab the x-y pos.s if browser is NS
        tempX = e.pageX
        tempY = e.pageY
      }  
      // catch possible negative values in NS4
      if (tempX < 0){tempX = 0}
      if (tempY < 0){tempY = 0}  

      moveDiv(tempX, tempY);

      return true
}

function moveDiv(tempXsent, tempYsent)
{
    if (canStartParallax == true)
    {
        var tempXreceived = tempXsent;
        var tempYreceived = tempYsent;

        if (tempYreceived <= headerDivHeight) //limit the mouse over area
        {
            for (var i=0;i<objectArray.length;i++)
            {
                var yourDivPositionX = objectArray[i][3] * (0.5 * windowWidth - tempXreceived) + objectArray[i][1].getX();
                objectArray[i][0].style.left = yourDivPositionX + 'px';
            }
        }
    }
}

function positionDivs()
{
    var verticalParallaxFactorMultiplyNumber = 2; //the bigger this number, the vertical gap between header object animation will be bigger too

    for (var i=0;i<objectArray.length;i++)
    {
        objectArray[i][0].style.left = objectArray[i][1].getX() + "px";

        if (canPositionDivsVertically == true)
        {
            if ((objectArray[i][0] == image2Div) || (objectArray[i][0] == image3Div) || (objectArray[i][0] == image4Div))
            {
                objectArray[i][0].style.top = objectArray[i][2] - ((1 + (verticalParallaxFactorMultiplyNumber * objectArray[i][3])) * windowHeight) + "px";
            }
            else if ((objectArray[i][0] == image1Div))
            {
                objectArray[i][0].style.top = objectArray[i][2] + "px";
            }
            else
            {
                objectArray[i][0].style.top = objectArray[i][2] + ((1 + (verticalParallaxFactorMultiplyNumber * objectArray[i][3])) * windowHeight) + "px";
            }
        }
    }
}

function setimage1ToTransparent()
{
    image1Div.style.opacity = 0;
    image1Div.style.filter = "alpha(opacity=" + 0 + ")";
}

function objectAnimation()
{
    var objectAnimationDuration = 2000;

    //animate preloader
    $(preloaderAndStringContainerDiv).stop().animate({top: (-1 * windowHeight) + "px"}, objectAnimationDuration, function() {hidePreloader()});

    for (var i=0;i<objectArray.length;i++)
    {
        if ((objectArray[i][0] == image1Div))
        {
            $(objectArray[i][0]).stop().fadeTo(objectAnimationDuration, 1);
        }
        else
        {
            if ((navigator.userAgent.match(/iPad/i) != null) || (navigator.userAgent.match(/iPhone/i) != null) || (navigator.userAgent.match(/iPod/i) != null)) //if using safari mobile device, never turn on parallax
            {
                $(objectArray[i][0]).stop().animate({top: objectArray[i][2] + "px"}, objectAnimationDuration, function() {canPositionDivsVertically = false});
            }
            else
            {
                $(objectArray[i][0]).stop().animate({top: objectArray[i][2] + "px"}, objectAnimationDuration, function() {canStartParallax = true; canPositionDivsVertically = false});
            }
        }
    }
}

function resizeHeader()
{
    positionDivs();
}

誰でも私にアドバイスしてもらえますか？本当にありがたいです。ありがとう。

4

1 に答える 1

1

現在、moveDivルーチンは、mousemoveイベントのハンドラーとして設定されているmouseXY関数によって呼び出されます。したがって、マウスを動かすまで、何もトリガーされません。

代わりに、mousemoveを使用して速度ベクトルを変更し、トリガーを使用して、この速度ベクトルを使用してmoveDivを呼び出す連続ループ（setIntervalから開始することをお勧めします）に入ります。

ホバーの動きでこれが発生することは望ましくないため（そうでない場合は、ボックスの上にマウスを置くと最初に激しく回転します）、mousedownでループに入り、mouseupとmouseoutでループを終了することを検討してください。

ここでアニメーションを実行しているときに、スムーズなアニメーションレンダリングをサポートする新しいブラウザの機能であるrequestAnimationFrameの使用を見てください。これには、繰り返し実行する関数を提供します。

http://paulirish.com/2011/requestanimationframe-for-smart-animating/

これらのアプローチのいずれかを使用する場合は、速度のベクトル（mousemoveイベントによって調整）と、フレームごとに更新されるタイムスタンプ変数の両方を保持することをお勧めします。コードの呼び出し間の遅延を予測することはできないため、一貫性を保つために、現在と最後のフレームのタイムスタンプの間のデルタを使用して移動距離を計算する必要があります。

于 2012-11-30T10:15:33.347 に答える