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

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 {
  overflow: hidden
}

但是，如果您需要在頁面上的其他地方允許溢出，您可能不一定要添加overflow: hidden到正文。 在這種情況下，你可以用你的#home和#menu部分的div有overflow: hidden適用於它。 請注意，您還需要添加position: relative to this 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>