Question

我仍在为一个基于3个级别的客户的Parallax网站工作。我遇到了一个问题，使我无法添加到第三个顶级。

网站本身具有以一种速度滚动的全屏背景。它是一个非常长的垂直图像，滚动缓慢。最重要的是以标准速度滚动的内容。

第三级只是位置：位于某些内容区域之上的绝对图形。基本浮动图像。

我遇到的问题是，对于大多数视差插件，我尝试过浮动的三级图像没有任何东西可以消失。这意味着我可以在更改它时立即根据屏幕尺寸设置它们，我看到它在一条看不见的线后面消失。

我可以使用任何插件或方法来阻止这种情况发生吗？所以基本上我想设置一个图像所在的位置，如果视差效果不起作用，那么它就会围绕这一点进行视差。

Answer 1

您需要根据纯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获得更高的效果

Answer 2

我遇到的问题是，对于大多数视差插件，我已经尝试过浮动的三级图像，没有任何东西可以消失。

您确实希望第三级图像在某些点消失吗？我有一个类似的问题，有一个长的单滚动背景，然后构建一个div的页面，没有背景，然后将图像放在页面上下各个div中，div overflow设置为hidden。更容易放置第三级图像，也意味着您可以在特定点隐藏它们。

Answer 3

如果你可以在屏幕尺寸上工作，只需使用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)});

    }
});

例如。

基于图像位置的视差效果

3 个答案: