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

Tips on attaching a click event listener to Nav.Link component in React Bootstrap

Resources for ExpressJS

Creating a post with an editable div element

Issue with Tailwind CSS: The 'overflow-y' property does not scroll all the way to the bottom when using 'top-[63px]'

Utilize JavaScript to extract and exhibit various SQL records stored within a multidimensional array

Struggling with calling rerenderEvents in FullCalendar using JQuery after a successful AJAX request

One particular page is having trouble loading CSS, whereas it loads perfectly fine on a different page

Issues with PHP Mail Forms not functioning as intended

Issues with CSS animation functionality have been detected in the Edge browser

The try and catch block in JavaScript is failing to correctly capture the HTTP status

Creating a mobile-friendly navigation bar with Vuetify for optimal responsiveness

adaptive menu bar with collapsible submenus

What is the best way to connect a relative CSS stylesheet to a master page?

What is preventing me from using header() to redirect to the page?

Browsing through all text on songmeanings.com's HTML files

"An unanticipated parameter was encountered while using jQuery AJAX to make

Using jQuery to delete data asynchronously with AJAX technology

Using Custom .woff Format Fonts in Sendgrid: A Guide

Tips for utilizing PrependTo dynamically on every element

Show the ajax response on a separate page