基于图像位置的视差效果
我仍然在为一个基于3个关卡的客户开发一个视差网站。我遇到了一个问题，使我无法添加到第三个顶级级别。
该网站本身有一个全屏背景，以一种速度滚动。这是一个非常长的垂直图像滚动缓慢。最重要的是以标准速度滚动的内容。
第三个层次是简单的位置:位于某些内容区域之上的绝对图形。基本上是浮动图像。
我遇到的问题是，对于我尝试过的大多数视差插件，浮动的第三级图像没有任何东西可以消失。这意味着，虽然我可以根据屏幕大小进行设置，但我看到它消失在一条看不见的线后面。
有没有什么插件或方法可以用来阻止这种情况的发生？所以本质上，我想设置一个位置，如果视差效果不起作用，图像会出现在那个点附近。
回答 3
Stack Overflow用户
发布于 2012-07-29 21:18:52
您需要编写自己的代码，基于纯jquery/javascript。
插件是为简单操作而创建的。您需要基于当前的$(document).scrollTop()创建JS应用
而主要的代码模式将是：
$(window).on('scroll resize',function(){
var Top = $(document).scrollTop();
if(Top < 200){ /*slide1 actions*/ }
else if(Top >= 200 && Top < 400){ /*slide2 actions*/ }
else if(Top >= 400 && Top < 600){ /*slide3 actions*/ }
// etc
});也可以使用此提示https://stackoverflow.com/a/11709360/1136141获得更高的性能
Stack Overflow用户
发布于 2012-08-29 18:28:03
，我遇到的问题是，对于我尝试过的大多数视差插件，浮动的第三级图像没有任何东西可以消失。
问题是您是否希望第三级图像在某些点消失？我也遇到了类似的问题，只有一个很长的滚动背景，然后在上面构建了一个没有背景的div页面，然后将图像放在页面上上下不同的div中，并将div overflow设置为hidden。更容易放置第三级图像，也意味着您可以将它们隐藏在特定的点。
Stack Overflow用户
发布于 2013-01-10 19:57:41
如果你能让它在屏幕大小上工作，只需使用jquery来获取和设置基于屏幕大小对象位置，
jQuery(document).ready(function($) {
jQuery.event.add(window, "load", resizeFrame);
jQuery.event.add(window, "resize", resizeFrame);
function resizeFrame()
{
var h = $(window).height();
$('#foo1') .css({'top': (h-30)});
$('#foo2') .css({'left': (h-67)});
}
});例如。
https://stackoverflow.com/questions/11192370
复制相似问题
腾讯云开发者
