Update the stationary background image on select div elements

Question

Update the stationary background image on select div elements

Currently working on a "our story" section where the divs move up and change the background image when they reach the center of the screen. I am aiming for a fixed background image that transitions smoothly when the div is in the middle. The relationship between the background image and the div is crucial.

Still honing my styling skills as I strive to achieve the desired effect.

For reference, you can view what I'm trying to accomplish at the following link:

Reference:

.parent {
  background-image: url(https://picsum.photos/1080/1920);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  height: 300vh;
  text-align: center;
  color: white;
}

.div1{
  background-color: aqua;
  height: 50vh;
  margin-top: 90vh;
  padding: 20px;
  width: 400px;
  margin: 90px auto

}

.div2{
  background-color: skyblue;
  height: 50vh;
  padding: 20px;
  width: 400px;
  margin: 90px auto
}

.div3{
  background-color: grey;
  height: 50vh;
  margin-top: 90vh;
  padding: 20px;
  width: 400px;
  margin: 90px auto

}

<div class="parent">
<div class="div1" >
Content about desert
</div>

<div class="div2" >
Content about mountains
</div>

<div class="div3" >
Content about birds
</div>
</div>

html jquery css css-animations css-transitions

Answer 1

Answer №1

If you're looking for a starting point on how to achieve this, the code snippet below could be helpful. It's a basic example to get you started and provide some direction for further exploration.

var sections;
const backgrounds = [
"url(https://i.picsum.photos/id/604/1080/1920.jpg?hmac=ZGdArZ8jNmfX3SDYlQMsYeGsKy6b_1uBH2WGFt3wYzk)",
"url(https://i.picsum.photos/id/301/1080/1920.jpg?hmac=7cyfS0iaSux6TVm9Wnkg4vtXIWyg_YyhhWYHM6yUTnE)",
"url(https://i.picsum.photos/id/155/1080/1920.jpg?hmac=UZT1atpRomcjj2ijIjwR9C3DY0xtD4On3m5XMNLak6o)"
];
var parent;
var bottomOffset;
function getViewScrollingElements() {
    parent = document.getElementById("parent");
    sections = document.getElementsByClassName("section");
    bottomOffset = window.getComputedStyle(parent).getPropertyValue("height");
    bottomOffset = parseInt(bottomOffset.substr(0, bottomOffset.length - 2)) / 3;
    //  Do first check before a scroll could have occurred
    checkInView();
}
function checkInView () {
    var boundingRect;
    for ( var i = 0; i < sections.length; i++ ) {
        //  Get the extremities of the div
        boundingRect = sections[i].getBoundingClientRect();
        //  Are the div's extremities in view
        if ( boundingRect.top < window.innerHeight && boundingRect.bottom >= bottomOffset ) {
            parent.style.backgroundImage = backgrounds[i];
            break;  //  Only want one at a time
        }
    }
}

.background {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}

.parent {
  text-align: center;
  color: white;
  height: 100%;
  overflow-y: auto;
}

.section {
  height: 70vh;
  padding: 20px;
  width: 400px;
  margin: 90px auto;
  opacity: 85%;
}

.section:nth-of-type(1) {
  background-color: aqua;
}

.section:nth-of-type(2) {
  background-color: skyblue;
}

.section:nth-of-type(3) {
  background-color: grey;
}

<body onLoad="getViewScrollingElements()">
<div class="background"></div>
<div id="parent" class="parent" onScroll="checkInView()">
    <div class="section">
        Content about desert
    </div>
    <div class="section">
        Content about mountains
    </div>
    <div class="section">
        Content about birds
    </div>
</div>
</body>

Please note that this code may not work properly in SOs fiddler due to iframe restrictions, but it should function as intended in Chrome and Firefox browsers.

Answer 2

If you're looking for a starting point on how to achieve this, the code snippet below could be helpful. It's a basic example to get you started and provide some direction for further exploration.

var sections;
const backgrounds = [
"url(https://i.picsum.photos/id/604/1080/1920.jpg?hmac=ZGdArZ8jNmfX3SDYlQMsYeGsKy6b_1uBH2WGFt3wYzk)",
"url(https://i.picsum.photos/id/301/1080/1920.jpg?hmac=7cyfS0iaSux6TVm9Wnkg4vtXIWyg_YyhhWYHM6yUTnE)",
"url(https://i.picsum.photos/id/155/1080/1920.jpg?hmac=UZT1atpRomcjj2ijIjwR9C3DY0xtD4On3m5XMNLak6o)"
];
var parent;
var bottomOffset;
function getViewScrollingElements() {
    parent = document.getElementById("parent");
    sections = document.getElementsByClassName("section");
    bottomOffset = window.getComputedStyle(parent).getPropertyValue("height");
    bottomOffset = parseInt(bottomOffset.substr(0, bottomOffset.length - 2)) / 3;
    //  Do first check before a scroll could have occurred
    checkInView();
}
function checkInView () {
    var boundingRect;
    for ( var i = 0; i < sections.length; i++ ) {
        //  Get the extremities of the div
        boundingRect = sections[i].getBoundingClientRect();
        //  Are the div's extremities in view
        if ( boundingRect.top < window.innerHeight && boundingRect.bottom >= bottomOffset ) {
            parent.style.backgroundImage = backgrounds[i];
            break;  //  Only want one at a time
        }
    }
}

.background {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}

.parent {
  text-align: center;
  color: white;
  height: 100%;
  overflow-y: auto;
}

.section {
  height: 70vh;
  padding: 20px;
  width: 400px;
  margin: 90px auto;
  opacity: 85%;
}

.section:nth-of-type(1) {
  background-color: aqua;
}

.section:nth-of-type(2) {
  background-color: skyblue;
}

.section:nth-of-type(3) {
  background-color: grey;
}

<body onLoad="getViewScrollingElements()">
<div class="background"></div>
<div id="parent" class="parent" onScroll="checkInView()">
    <div class="section">
        Content about desert
    </div>
    <div class="section">
        Content about mountains
    </div>
    <div class="section">
        Content about birds
    </div>
</div>
</body>

Please note that this code may not work properly in SOs fiddler due to iframe restrictions, but it should function as intended in Chrome and Firefox browsers.

Update the stationary background image on select div elements

Answer №1

Similar questions

Tips for dynamically resizing a div element as a user scrolls, allowing it to expand and contract based on

Retrieving XML data from an external API is essential for integrating information

Encountering a 500 Internal Server Error while attempting to insert data into a MYSQL database using

How can we show a React JS component when clicked, without using the App.js file for display?

Adjusting the maximum character limit of the text input field

How to trigger a forced download of a .csv file instead of displaying it in the browser using HTML

Ways to align an inner circle in the middle using CSS

Enhancing User Interfaces with JQuery UI Widgets and Dynamic AJAX Calls

Enhancing user experience with autocomplete functionality using jQuery combined with server

Having trouble adding your own styling to bootstrap-4 using a custom CSS file?

I have developed a website that can calculate the factorial of any given number. The next step is to design a function that will display the step-by-step mathematical process

Struggling to get .parent().toggleClass to function properly

Adjusting the height of content in Angular Material 2 md-tab

organizing data input into a POST array

Adjust the height of a div to match the tallest element in the same row using jQuery and Javascript

How to share custom data with fb_share feature while displaying box count? (find out more below)

How to disable the automatic sliding of the Twitter Bootstrap carousel when the page first loads

Connect to a particular section of the webpage with additional top spacing

Creating a custom Jquery function to generate a Div element instead of a Textbox in your web application

Selenium VBA - Issue with checking checkbox