Эффект параллакса делает фон больше, чем контейнер, в котором он расположен - PullRequest
Новая
       9

Эффект параллакса делает фон больше, чем контейнер, в котором он расположен

1 голос
/ 19 марта 2020

У меня есть код, который создает пустое пространство в правой части страницы, потому что фон больше, чем контейнер, и я не знаю, как это исправить, если я хочу, чтобы мой фон был параллаксирован.

Есть идеи как это исправить? 

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>

1 Ответ

2 голосов
/ 19 марта 2020

Причина, по которой фон div расширяется за пределы контейнера, заключается в том, что с помощью transform: translate(...) вы перемещаете фон за пределы контейнера.

Если вместо перемещения фона за пределами контейнера, вы хотите переместить фон и обрезать его края, чтобы соответствовать контейнеру, вам, вероятно, потребуется использовать некоторую форму overflow: hidden, которая не позволяет контейнеру показывать что-либо за его пределами.

In В случае кода, который вы разместили, вы можете просто добавить overflow: hidden к элементу body: 

body {
  overflow: hidden
}

Однако вы можете не обязательно добавлять overflow: hidden в тело, если вам нужно разрешить переполнение где-нибудь еще на странице. В этом случае вы можете обернуть свои секции #home и #menu в div, к которому применен overflow: hidden. Обратите внимание, что вам также нужно добавить 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>
...