Question

我想使用航点在两个视差背景之间切换。一切都适用于Chrome，但问题出现在其他浏览器上。

Firefox：当我在背景图片之间切换时，下一个背景将在网站上的所有其他元素上显示一秒钟。
Safari，有很多滞后。

现在编辑工作示例： http://codepen.io/rajjejosefsson/pen/vXVYNL

.background_fill {
    overflow: hidden;
    position: relative;
}

.background_fill:before {
    top: 0;
    background-color: white;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
    content: " ";
    position: fixed;
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('http://www.w3schools.com/css/trolltunga.jpg');
    will-change: transform;
    width: 100%;
    height: 100%;
}

.background-render { 
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('http://hdwallpaperia.com/wp-content/uploads/2013/11/Mobile-Wallpapers-HD-640x400.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: -1;
    will-change: transform;
    pointer-events: none;
}

Answer 1

我刚从show（）和hide（）函数中删除了params，它在FF和Safari中开始工作正常。

Show和hide函数不接受此类参数。 .background_fill不是有效期限。

生成的JavaScript：

$(".background_fill").hide();

$(document).ready(function() {

  /* new hidden background */

  $('.js_show_new_bg').waypoint(function(direction) {

    if (direction === "down") {
      $(".background_fill").show();
    } else {
      $(".background_fill").hide();
    }
  }, {
    offset: '1%'
  });

});

您还可以使用toggle功能来简化代码：

$(".background_fill").toggle(direction === "down"); // true = show, false = hide

而不是这段代码：

if (direction === "down") {
  $(".background_fill").show();
} else {
  $(".background_fill").hide();
}

在两个视差背景之间切换

1 个答案: