The enchanting world of CSS background scrolling animations

Question

The enchanting world of CSS background scrolling animations

I am currently developing a website where I have split the hero/header into two sections - one on the left with information and the other on the right with a graphic. I wanted to add a simple parallax effect to the image on the right side, so I used background-attachment: fixed;.

However, I now need to change the background-attachment property once the bottom of the graphic reaches the next section, so the image will scroll up along with the rest of the content from that point onwards.

You can view a Fiddle that demonstrates what I'm trying to achieve here:

https://jsfiddle.net/fg67ho2L/1/

Is there a way to make this work as intended so that the right side (image) behaves correctly? Your help is greatly appreciated. Thank you.

jquery html css

Answer 1

Answer №1

To make it happen, adjust the height value of the right side to be lower than the left side.

Answer 2

To make it happen, adjust the height value of the right side to be lower than the left side.

Answer 3

Answer №2

Encountering an error with the script led me to make some changes.

var abouttop = document.getElementById("about").getBoundingClientRect().height;

Instead of using background-attachment, I opted for transforms. It's worth noting that you need to add the id="about" to your text-container. Since I don't use JQuery, here is a piece of functional javascript code (please excuse the untidy format):

var pos = 0;

var imageControl = function(e) {
  var scrollposition = document.documentElement.scrollTop;
  var abouttop = document.getElementById("about").getBoundingClientRect().height;
  var scrollBottom = jQuery(window).scrollTop() + jQuery(window).height();
  var image_height = document.getElementById("image").getBoundingClientRect().height;

  if (scrollBottom < abouttop) {
    pos = scrollposition;
  } else if (scrollBottom > abouttop) {
    //pos = abouttop-image_height;
  }
  console.log(pos);
  document.getElementById("image").style.transform = "translateY(" + pos + "px)";
};

jQuery(window).scroll(imageControl);

Answer 4

Encountering an error with the script led me to make some changes.

var abouttop = document.getElementById("about").getBoundingClientRect().height;

Instead of using background-attachment, I opted for transforms. It's worth noting that you need to add the id="about" to your text-container. Since I don't use JQuery, here is a piece of functional javascript code (please excuse the untidy format):

var pos = 0;

var imageControl = function(e) {
  var scrollposition = document.documentElement.scrollTop;
  var abouttop = document.getElementById("about").getBoundingClientRect().height;
  var scrollBottom = jQuery(window).scrollTop() + jQuery(window).height();
  var image_height = document.getElementById("image").getBoundingClientRect().height;

  if (scrollBottom < abouttop) {
    pos = scrollposition;
  } else if (scrollBottom > abouttop) {
    //pos = abouttop-image_height;
  }
  console.log(pos);
  document.getElementById("image").style.transform = "translateY(" + pos + "px)";
};

jQuery(window).scroll(imageControl);

The enchanting world of CSS background scrolling animations

Answer №1

Answer №2

Similar questions

Achieving compatibility with IE7 for utilizing "before:" and "after:" pseudo-elements along with the "box-sizing:border

Is there a universal method to disregard opacity when utilizing jQuery's clone() function across different web browsers?

Should the value exceed the designated width of the combobox, it should be displayed across multiple lines

I'm seeking an easy method to adjust the x and y coordinates of a popup rectangle with a fixed size. Can anyone provide

Understanding AngularJS and how to effectively pass parameters is essential for developers looking

The CSS for a VueJS compiled app seems to fail to apply properly unless manually copied and pasted into the browser's style editor

Guide to changing the background colors of multiple elements when hovered over by the mouse?

The bottom of the page refuses to remain anchored

What is the best way to stop event bubbling in react-router-dom when using the <Link> component?

Rearrange the following <div> to appear before the previous one on medium and small devices using Bootstrap

Steps for adding an HTML string to a div element using Ajax

What is the best way to design distinct buttons for various devices?

How come my wrapper box doesn't extend to the full width of the screen when I set it to width: 100%?

How to transform multi-dimensional arrays to JSON format using JavaScript (and maybe jQuery)

Flex container scrollable element not functioning consistently between different browsers

What is the best way to loop through an array and apply classes to each element separately?

The functionality of ng-style is not compatible with min, and utilizing ng-model produces undesirable results

How to send JSON data to Node.JS using jquery

PayPal's fast checkout page experiencing a billing problem

Overriding default settings in Jquery Datatables to deactivate the Previous and Next pagination buttons