Correcting picture on parallax effect jQuery

Question

I have a parallax effect I am using to work on this site of pictures but I wanted to know why it was clipping the pictures and how I can correct said problem. Whenever I scroll down a certain length it cuts the pictures off and starts the next one but then it brings the other one back on top. When you get to bottom picture it is showing the top on bottom and bottom on top.

jQuery Parallax

<section class="home">
  <div class="pic img1 parallax"></div>
  <div class="pic img2 parallax"></div>
  <div class="pic img3 parallax"></div>
  <div class="pic img4 parallax"></div>
</section>


body {
  box-sizing: border-box;
  margin: 0;
}

section {
  width: 100%;
  height: 50em;
}

.pic {
  width: 100%;
  height: 50em;
  background-size: cover;
  background-position: center;
}

.img1 {
  background-image: url('https://images.unsplash.com/photo-1536164832230-6c238c58f740?ixlib=rb-0.3.5&s=09987436d4a89cf8c848c93aa574dfda&auto=format&fit=crop&w=1650&q=80');
}

.img2 {
  background-image: url('https://images.unsplash.com/photo-1536221236547-04007cfc3d8b?ixlib=rb-0.3.5&s=426505fd76bd618fdd95640f8870e38c&auto=format&fit=crop&w=1650&q=80');
}

.img3 {
  background-image: url('https://images.unsplash.com/photo-1536171010494-d89014448ca1?ixlib=rb-0.3.5&s=4f7b5d0b81a5f1e1445a86fd9a251a46&auto=format&fit=crop&w=1576&q=80');
}

.img4 {
  background-image: url('https://images.unsplash.com/photo-1536108978996-128e3e2a9783?ixlib=rb-0.3.5&s=31ce21b0ec2bb391c601c681fc1c7952&auto=format&fit=crop&w=1475&q=80');
}

//jQuery Parallax
$(document).ready(function() {

  $(window).scroll(function() {
    parallax();
  })

  function parallax() {

    var wScroll = $(window).scrollTop();
    //select element, class, id etc and property
    $('.pic').css('background-position', 'center ' +(wScroll)+'px')
    //you can also change speed 
  }
});

Answer 1

It's not the parallax script that's making your pictures get cropped. They get cropped because you're using background-size:cover , which...

... scales the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.

Seeofficial specification on background-size property.

This concludes my answer but I'll also add some considerations on what you currently use, hoping you'll find it useful.

---

You're giving .pic (and section ) a height of 50em while the parallax technique you're using is intended to create an effect of panel -like elements with heights equal to the devices's height ( 100vw ) and you're currently breaking that, reducing the effect. On devices with a height taller than 50em your images will be shorter than the screen and you'll see the next one's top, while on devices shorter than 50em user will need to scroll a bit before the next image will start unveiling. You can test this by resizing your browser window at full width and only half of normal height and you'll understand what I'm talking about.

Resize this example and compare it with resizing yours:

 $(document).ready(function() { $(window).scroll(function() { parallax(); }) function parallax() { var wScroll = $(window).scrollTop(); $('.pic').css('background-position', '50% ' +(wScroll)+'px') } });

 body { box-sizing: border-box; margin: 0; } section, .pic { width: 100%; height: 100vh; } .pic { background-size: cover; } .img1 { background-image: url('https://images.unsplash.com/photo-1536164832230-6c238c58f740?ixlib=rb-0.3.5&s=09987436d4a89cf8c848c93aa574dfda&auto=format&fit=crop&w=1650&q=80'); } .img2 { background-image: url('https://images.unsplash.com/photo-1536221236547-04007cfc3d8b?ixlib=rb-0.3.5&s=426505fd76bd618fdd95640f8870e38c&auto=format&fit=crop&w=1650&q=80'); } .img3 { background-image: url('https://images.unsplash.com/photo-1536171010494-d89014448ca1?ixlib=rb-0.3.5&s=4f7b5d0b81a5f1e1445a86fd9a251a46&auto=format&fit=crop&w=1576&q=80'); } .img4 { background-image: url('https://images.unsplash.com/photo-1536108978996-128e3e2a9783?ixlib=rb-0.3.5&s=31ce21b0ec2bb391c601c681fc1c7952&auto=format&fit=crop&w=1475&q=80'); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <section class="home"> <div class="pic img1 parallax"></div> <div class="pic img2 parallax"></div> <div class="pic img3 parallax"></div> <div class="pic img4 parallax"></div> </section>

---

But probably the biggest improvement you can make is dumping JavaScript altogether. Parallax methods bound on scroll event are expensive (they don't work smoothly on devices without decent computing power) and they simply fail on most touch devices which, for performance reasons, prevent JavaScript execution during scroll.

The exact same effect is achievable with simple CSS, namely with

background-attachment:fixed

... without having to bind a listener on scroll for changing background-position . It works on virtually any device, regardless of computation power and also on touch devices:

 body { box-sizing: border-box; margin: 0; } section, .pic { width: 100%; height: 100vh; } .pic { background-size: cover; background-attachment: fixed; background-position: 50% 50%; } .img1 { background-image: url('https://images.unsplash.com/photo-1536164832230-6c238c58f740?ixlib=rb-0.3.5&s=09987436d4a89cf8c848c93aa574dfda&auto=format&fit=crop&w=1650&q=80'); } .img2 { background-image: url('https://images.unsplash.com/photo-1536221236547-04007cfc3d8b?ixlib=rb-0.3.5&s=426505fd76bd618fdd95640f8870e38c&auto=format&fit=crop&w=1650&q=80'); } .img3 { background-image: url('https://images.unsplash.com/photo-1536171010494-d89014448ca1?ixlib=rb-0.3.5&s=4f7b5d0b81a5f1e1445a86fd9a251a46&auto=format&fit=crop&w=1576&q=80'); } .img4 { background-image: url('https://images.unsplash.com/photo-1536108978996-128e3e2a9783?ixlib=rb-0.3.5&s=31ce21b0ec2bb391c601c681fc1c7952&auto=format&fit=crop&w=1475&q=80'); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <section class="home"> <div class="pic img1 parallax"></div> <div class="pic img2 parallax"></div> <div class="pic img3 parallax"></div> <div class="pic img4 parallax"></div> </section>