视差效果使背景比它所在的容器大

Question

我有一个代码在页面右侧创建白色 space，因为背景比容器大，如果我想保留我的背景，我不知道如何解决这个问题视差。

有什么解决办法吗？

var lFollowX = 0,
  lFollowY = 0,
  x = 0,
  y = 0,
  friction = 1 / 60;

function moveBackground() {
  x += (lFollowX - x) * friction;
  y += (lFollowY - y) * friction;

  translate = 'translate(' + x + 'px, ' + y + 'px) scale(1.1)';

  $('#home-background').css({
    '-webit-transform': translate,
    '-moz-transform': translate,
    'transform': translate
  });

  window.requestAnimationFrame(moveBackground);
}

$(window).on('mousemove click', function(e) {

  var lMouseX = Math.max(-100, Math.min(100, $(window).width() / 2 - e.clientX));
  var lMouseY = Math.max(-100, Math.min(100, $(window).height() / 2 - e.clientY));
  lFollowX = (20 * lMouseX) / 100; // 100 : 12 = lMouxeX : lFollow
  lFollowY = (10 * lMouseY) / 100;

});

moveBackground();

#home-background {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url("https://www.tokkoro.com/picsup/5746854-geometry-wallpapers.jpg") no-repeat center center;
  background-size: cover;
  z-index: -1;
}

#menu {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #251524;
  height: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="home">
  <div id="home-background"></div>
  <div id="greeting">
    <h1>Hello</h1>
  </div>
</section>
<section id="menu">
  <ul>
    <li><a href="#home">Home</a></li>
  </ul>
</section>

Answer 1

背景 div 超出容器限制的原因是，通过使用 transform: translate(...)，您正在将背景移出容器。

如果您不想移动背景超出容器，而是移动背景并剪裁其边缘以匹配容器，您可能需要使用某种形式的 overflow: hidden，这会阻止容器不显示其范围之外的任何内容。

对于您发布的代码，您只需将 overflow: hidden 添加到 body 元素即可：

body {
  overflow: hidden
}

但是，如果您需要在页面的其他地方允许溢出，您可能不一定要将 overflow: hidden 添加到正文中。在这种情况下，您可以将 #home 和 #menu 部分包装在应用了 overflow: hidden 的 div 中。请注意，您还需要将 position: relative 添加到此 div 才能正常工作。

例如，这是您的 HTML:

的更新版本

<div class="container">
  <section id="home">
    <div id="home-background"></div>
    <div id="greeting">
      <h1>Hello</h1>
    </div>
  </section>
  <section id="menu">
    <ul>
      <li><a href="#home">Home</a></li>
    </ul>
  </section>
</div>

和对应的CSS：

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

这是演示此解决方案的代码片段：

var lFollowX = 0,
  lFollowY = 0,
  x = 0,
  y = 0,
  friction = 1 / 60;

function moveBackground() {
  x += (lFollowX - x) * friction;
  y += (lFollowY - y) * friction;

  translate = 'translate(' + x + 'px, ' + y + 'px) scale(1.1)';

  $('#home-background').css({
    '-webit-transform': translate,
    '-moz-transform': translate,
    'transform': translate
  });

  window.requestAnimationFrame(moveBackground);
}

$(window).on('mousemove click', function(e) {

  var lMouseX = Math.max(-100, Math.min(100, $(window).width() / 2 - e.clientX));
  var lMouseY = Math.max(-100, Math.min(100, $(window).height() / 2 - e.clientY));
  lFollowX = (20 * lMouseX) / 100; // 100 : 12 = lMouxeX : lFollow
  lFollowY = (10 * lMouseY) / 100;

});

moveBackground();

.container {
  overflow: hidden;
  position: relative;
  height: 300px;
}

#home-background {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url("https://www.tokkoro.com/picsup/5746854-geometry-wallpapers.jpg") no-repeat center center;
  background-size: cover;
  z-index: -1;
}

#menu {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #251524;
  height: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <section id="home">
    <div id="home-background"></div>
    <div id="greeting">
      <h1>Hello</h1>
    </div>
  </section>
  <section id="menu">
    <ul>
      <li><a href="#home">Home</a></li>
    </ul>
  </section>
 </div>

视差效果使背景比它所在的容器大

Parallax effect making background bigger than the container where it's located

javascript

html

css

parallax