CODEWITHSUNDEEP
javascripthtmlcssparallax
nosferatume
nosferatume

Reputation: 73

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

I have a code which is creating white space on the right side of the page because the background is bigger than the container and I don't know how to fix that if I want to keep my background parallaxed.

Are there any ideas how to fix that?

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>

Upvotes: 1

Views: 214

Answers (1)

Jacob Lockard
Jacob Lockard

Reputation: 1275

The reason that the background div is expanding beyond the limits of the container is because, by using transform: translate(...), you are moving the background outside the container.

If, instead of moving the background beyond the container, you want to move the background and clip its edges to match the container, you will likely need to use some form of overflow: hidden, which prevents the container from showing anything outside its bounds.

In the case of the code you posted, you can simply add overflow: hidden to the body element:

body {
  overflow: hidden
}

However, you may not necessarily want to add overflow: hidden to the body if you need to allow overflow somewhere else on the page. In that case, you can wrap your #home and #menu sections in a div that has overflow: hidden applied to it. Note that you also need to add position: relative to this div for it to work.

For example, here is an updated version of your 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>

And the corresponding CSS:

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

Here is a code snippet demonstrating this solution:

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>

Upvotes: 2

Related Questions