滚动垂直视差

我正在研究简化的垂直视差（类似于http://nikebetterworld.com）。滚动垂直视差

我有一个quick demo working - 代码在技术上可行，但每次滚动后我都会对重绘产生焦虑效果 - 这看起来像是JavaScript发生的很晚。任何想法为什么？我看不到真正脱颖而出的脚本中的任何内容。

var getYPosition = function() { 
    if (typeof(window.pageYOffset) == 'number') { 
    return window.pageYOffset; 
    } else { 
    return document.documentElement.scrollTop; 
    }  
}; 

$(document).ready(function(){ 
    var sections = $(".section"); 
    $(window).scroll(function() { 
    var x = getYPosition(), 
    y = Math.floor(x/1600), 
    z = $(sections[y]).offset(); 
    $(sections[y]).css("background-position", "0 " + (getYPosition() - z.top)/2 + "px"); 
    }); 
});

来源

2011-07-26 andrewheins

好主，这很烦人。我们能否让这个时尚很快死亡？ –

我一边喝醉，一边看着那不是一个好主意。 – tster

它看起来就像图像被移动两次 - 第一次由浏览器滚动，然后由您scroll()处理程序。因此抖动。

对图像使用position:fixed或background-attachment:fixed可以获得更清晰的效果 - 这样它们不受浏览器滚动的影响，但会被scroll()处理程序移动。你将不再有一个与另一个战斗的效果。您必须相应地修改您的scroll()处理程序。

来源

2011-07-26 04:18:35 brainjam

background-attachment：fixed;我甚至不知道财产存在。谢谢！ – andrewheins

您应该检查您的滚动回调过于频繁。如果是这样的话，你可以尝试使用setInterval的限制rerenderings数量：

http://ejohn.org/blog/learning-from-twitter/

var outerPane = $details.find(".details-pane-outer"), 
    didScroll = false; 

$(window).scroll(function() { 
    didScroll = true; 
}); 

setInterval(function() { 
    if (didScroll) { 
     didScroll = false; 
     // Check your page position and then 
     // Load in more results 
    } 
}, 250); //in miliseconds

来源

2011-07-26 03:19:58 hugomg

不太需要这个问题，但一个很好的技术。谢谢。 – andrewheins

Undersocre.js，你应该考虑用于任何非平凡的JavaScript项目，有一个方法可以为你调用'throttle'。 –

滚动垂直视差

回答

相关问题