平滑視差效果

我正在嘗試製作視差效果。是的，我瞭解有現成的解決方案，但爲了進行自我教育，我決定從頭開始寫「純」js（沒有jq）。所以我面對的問題是我通過js處理的「圖層」，抖動，只有當我用鼠標滾動頁面時纔會出現。使用滾動條的手動滾動工作正常。我使用此代碼爲一個層更新：平滑視差效果

window.onscroll = function() { 
    requestAnimFrame(scrollCalc); 
} 

scrollCalc = function() { 
    for (var i = 0; i < parallaxes.length; i++) { 
     var offset = (parallaxParents[i].getBoundingClientRect().top) * (-1) * parallaxes[i].magnitude; 
     parallaxes[i].style.transform = "translate3d(0, " + offset + "px, 0)"; 
    } 
} 

requestAnimFrame = (
    window.requestAnimationFrame  || 
    window.webkitRequestAnimationFrame || 
    window.mozRequestAnimationFrame || 
    window.oRequestAnimationFrame  || 
    window.msRequestAnimationFrame  || 
    function(callback) { 
     setTimeout(callback, 1000/60); 
    } 
);

parallaxParents變量存儲視差層的父DOM元素，和視差可變storese視差層本身。 PS：我在鉻上看到的那些搖擺，firefox有microlags。我相信這兩個細微差別的根本原因可以在同一個問題中討論。

對不起我的英文不好

來源

2016-02-12 tigrik2017

請提供說明問題的小提琴或完整摘錄（包括最小的HTML，JS，CSS）。 – jcaron

另外我不太確定爲什麼你需要在這種情況下使用'requestAnimationFrame'。您經常使用它來檢查當前的偏移量，是否存在滾動，或者在滾動事件被觸發時直接進行工作，這似乎很正常。 – jcaron

已經解決了。我用這種方式覆蓋了默認的鼠標滾輪功能。

window.onmousewheel = function (e) { 
     e.preventDefault(); 
     window.scrollTo(window.pageXOffset + e.deltaX/scrollRatio, window.pageYOffset + e.deltaY/scrollRatio) 
    }

也許這不是最好的解決方案，但它工作正常。滾動上的抖動消失了。

來源

2016-02-12 13:44:24 tigrik2017

平滑視差效果

回答

相關問題