Modern Background Parallax Scroll Effect With jQuery And CSS

An elegant approach to creating a modern smooth parallax scroll effect on background images using jQuery and CSS background properties.

How to use it:

1. Add a background image to the container using the data-image-src attribute:

<div class="parallax" data-image-src="bg.jpg">
  Any Content here
</div>

2. The necessary CSS rules for the parallax image.

.parallax {
  position: relative;
  background-attachment: fixed;
  background-position: center 0;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}

3. Turn off the parallax scroll effect for tablets and phones.

@media only screen and (max-device-width: 1024px) {
  .parallax {
    background-attachment: scroll;
  }
}

4. Import the needed jQuery JavaScript library into the document.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>

5. Populate images from data attributes.

var scrolled = $(window).scrollTop()
$('.parallax').each(function(index) {
  var imageSrc = $(this).data('image-src')
  var imageHeight = $(this).data('height')
  $(this).css('background-image','url(' + imageSrc + ')')
  $(this).css('height', imageHeight)

  // Adjust the background position.
  var initY = $(this).offset().top
  var height = $(this).height()
  var diff = scrolled - initY
  var ratio = Math.round((diff / height) * 100)
  $(this).css('background-position','center ' + parseInt(-(ratio * 1.5)) + 'px')
})

6. Check if the element is in the viewport.

function isInViewport(node) {
  // Am I visible? Height and Width are not explicitly necessary in visibility
  // detection, the bottom, right, top and left are the essential checks. If an
  // image is 0x0, it is technically not visible, so it should not be marked as
  // such. That is why either width or height have to be > 0.
  var rect = node.getBoundingClientRect()
  return (
    (rect.height > 0 || rect.width > 0) &&
    rect.bottom >= 0 &&
    rect.right >= 0 &&
    rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.left <= (window.innerWidth || document.documentElement.clientWidth)
  )
}

7. Attach the scroll event to the window. Calculate the scroll ratio of each element and change the image position with that ratio.

$(window).scroll(function() {
  var scrolled = $(window).scrollTop()
  $('.parallax').each(function(index, element) {
    var initY = $(this).offset().top
    var height = $(this).height()
    var endY  = initY + $(this).height()

    // Check if the element is in the viewport.
    var visible = isInViewport(this)
    if(visible) {
      var diff = scrolled - initY
      var ratio = Math.round((diff / height) * 100)
      $(this).css('background-position','center ' + parseInt(-(ratio * 1.5)) + 'px')
    }
  })
})

---

This awesome jQuery plugin is developed by lautiamkok. For more Advanced Usages, please check the demo page or visit the official website.