视差效果使背景大于其所在的容器

Question

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

有什么想法可以解决这个问题吗？

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 {&nbsp; overflow: hidden}overflow: hidden但是，如果您需要允许页面其他地方溢出，您可能不一定要添加到正文。在这种情况下，您可以将您的#home和#menu部分包装在div已overflow: hidden应用于它的 中。请注意，您还需要添加position: relative此内容div才能使其正常工作。例如，以下是 HTML 的更新版本：<div class="container">&nbsp; <section id="home">&nbsp; &nbsp; <div id="home-background"></div>&nbsp; &nbsp; <div id="greeting">&nbsp; &nbsp; &nbsp; <h1>Hello</h1>&nbsp; &nbsp; </div>&nbsp; </section>&nbsp; <section id="menu">&nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; <li><a href="#home">Home</a></li>&nbsp; &nbsp; </ul>&nbsp; </section></div>以及相应的CSS：.container {&nbsp; &nbsp; overflow: hidden;&nbsp; &nbsp; position: relative;}这是演示此解决方案的代码片段：var lFollowX = 0,&nbsp; lFollowY = 0,&nbsp; x = 0,&nbsp; y = 0,&nbsp; friction = 1 / 60;function moveBackground() {&nbsp; x += (lFollowX - x) * friction;&nbsp; y += (lFollowY - y) * friction;&nbsp; translate = 'translate(' + x + 'px, ' + y + 'px) scale(1.1)';&nbsp; $('#home-background').css({&nbsp; &nbsp; '-webit-transform': translate,&nbsp; &nbsp; '-moz-transform': translate,&nbsp; &nbsp; 'transform': translate&nbsp; });&nbsp; window.requestAnimationFrame(moveBackground);}$(window).on('mousemove click', function(e) {&nbsp; var lMouseX = Math.max(-100, Math.min(100, $(window).width() / 2 - e.clientX));&nbsp; var lMouseY = Math.max(-100, Math.min(100, $(window).height() / 2 - e.clientY));&nbsp; lFollowX = (20 * lMouseX) / 100; // 100 : 12 = lMouxeX : lFollow&nbsp; lFollowY = (10 * lMouseY) / 100;});moveBackground();.container {&nbsp; overflow: hidden;&nbsp; position: relative;&nbsp; height: 300px;}#home-background {&nbsp; width: 100%;&nbsp; height: 100%;&nbsp; position: absolute;&nbsp; top: 0;&nbsp; left: 0;&nbsp; background: url("https://www.tokkoro.com/picsup/5746854-geometry-wallpapers.jpg") no-repeat center center;&nbsp; background-size: cover;&nbsp; z-index: -1;}#menu {&nbsp; display: flex;&nbsp; justify-content: center;&nbsp; align-items: center;&nbsp; background-color: #251524;&nbsp; height: auto;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="container">&nbsp; <section id="home">&nbsp; &nbsp; <div id="home-background"></div>&nbsp; &nbsp; <div id="greeting">&nbsp; &nbsp; &nbsp; <h1>Hello</h1>&nbsp; &nbsp; </div>&nbsp; </section>&nbsp; <section id="menu">&nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; <li><a href="#home">Home</a></li>&nbsp; &nbsp; </ul>&nbsp; </section>&nbsp;</div>