Fixing an image using parallax effect in jQuery

Question

Fixing an image using parallax effect in jQuery

I have encountered a parallax effect issue while working on this site with pictures. The problem is that the pictures are getting clipped, and I need to figure out how to fix this issue. When I scroll down to a certain length, it cuts off the pictures and transitions to the next one abruptly, causing the previous picture to overlap. It's disorienting because when you reach the bottom picture, it shows up at the top and vice versa.

Check out jQuery Parallax for more details.

<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 
  }
});

jquery html css scroll parallax

Answer 1

Answer №1

It's not the parallax script that is causing your images to be cropped. The cropping occurs because you are using background-size:cover, which...

... resizes the image while maintaining its original aspect ratio, ensuring that both the width and height cover the background area.

For more information on the background-size property, refer to the official specification.

This wraps up my response, but I'll also provide some insights into your current setup in the hopes that you will find it helpful.

You've set a height of 50em for .pic (and section), while the intended effect of the parallax technique you're using is to create panel-like elements with heights matching the device's height (

100vw</code). By doing this, you are compromising the effect. On devices taller than <code>50em

, your images will appear shorter than the screen, revealing the top of the next image. Conversely, on devices shorter than 50em, users will need to scroll before the next image appears. You can test this by resizing your browser window to full width and half of normal height to visualize the issue.

To see the difference, resize the example provided below and compare it with your current setup:

$(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, img3, img4 - additional background images)

</section>

An even better improvement would involve eliminating JavaScript altogether. Parallax effects relying on the scroll event tend to be resource-intensive (causing disruption on low-powered devices) and do not perform well on touch devices due to restrictions on JavaScript execution during scrolling.

The same visual effect can be achieved through simple CSS alone, specifically with the use of

background-attachment:fixed

... without the need for a scroll listener to adjust background-position. This approach works smoothly across different devices, irrespective of their computing power, including 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, img2, img3, img4 - background images)

</section>

Answer 2

It's not the parallax script that is causing your images to be cropped. The cropping occurs because you are using background-size:cover, which...

... resizes the image while maintaining its original aspect ratio, ensuring that both the width and height cover the background area.

For more information on the background-size property, refer to the official specification.

This wraps up my response, but I'll also provide some insights into your current setup in the hopes that you will find it helpful.

You've set a height of 50em for .pic (and section), while the intended effect of the parallax technique you're using is to create panel-like elements with heights matching the device's height (

100vw</code). By doing this, you are compromising the effect. On devices taller than <code>50em

, your images will appear shorter than the screen, revealing the top of the next image. Conversely, on devices shorter than 50em, users will need to scroll before the next image appears. You can test this by resizing your browser window to full width and half of normal height to visualize the issue.

To see the difference, resize the example provided below and compare it with your current setup:

$(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, img3, img4 - additional background images)

</section>

An even better improvement would involve eliminating JavaScript altogether. Parallax effects relying on the scroll event tend to be resource-intensive (causing disruption on low-powered devices) and do not perform well on touch devices due to restrictions on JavaScript execution during scrolling.

The same visual effect can be achieved through simple CSS alone, specifically with the use of

background-attachment:fixed

... without the need for a scroll listener to adjust background-position. This approach works smoothly across different devices, irrespective of their computing power, including 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, img2, img3, img4 - background images)

</section>

Fixing an image using parallax effect in jQuery

Answer №1

Similar questions

Ways to capture all characters (including special characters like ) using Visual Studio Regex

Identifying the HTML Hidden Attribute Using JavaScript Without Dependencies

You cannot select the initial letter of an element

Creating links to external websites in PHP files

Restoring the background color to its original shade following alterations made by jQuery

HTML5, canvas covering every element

Automatically substitute a term with a clickable link

Issues arise with the blinking of my table rows

Having trouble retrieving JSON data from an external source

Is there a method to instruct angular-cli (for angular 2) to produce a minified version of css files?

Tips for incorporating a personalized CSS stylesheet while utilizing Bootstrap

Javascript is responsible for causing a div to become stuck in a loop of alternating between

Adjust the image to stretch and crop appropriately to perfectly fit the specified dimensions

JS seems to kick in only after a couple of page refreshes

Trigger the opening of a bootstrap modal from an external source on the current page

Implement a jQuery click event on a dynamically generated button in the code-behind

How is it possible for a local variable to be utilized outside of its original scope in code?

Using Jquery to display the quantity of divs depending on the button clicked

Retrieving the ID value and activating a click function for each link sharing a common class using jQuery

Selecting check box values is not supported by Internet Explorer when using j query