I'm trying to change the background colour of my webpage on scroll using IntersectionObserver- this is the code I have so far:
const callback = (entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
style.backgroundColor = entry.target.getAttribute('data-color');
}
});
};
const changes = document.querySelectorAll('.change');
const observer = new IntersectionObserver(callback);
changes.forEach(change => {
observer.observe(change);
});I would like to have it change colour when the viewer scrolls to a div, possibly using something like
<div id= "indiaText" class="change" data-color="orange">Does anyone have an idea of how I can achieve this? I have also tried $(window).scroll(function() { however I only get an error using this method. Thank you
You almost had it.
The only real problem was that the style.backgroundColor = line was throwing an exception because style wasn't declared/defined. i changed it to document.body.style.backgroundColor.
I tweaked a couple of other things, but these aren't critical:
{ threshold: .5 } to the IntersectionObserver so the color change doesn't occur until the target div is 50% on screen.body just to soften the color change.const callback = (entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
document.body.style.backgroundColor = entry.target.dataset.color;
}
});
};
const changes = document.querySelectorAll('.change');
const observer = new IntersectionObserver(callback, { threshold: .5 });
changes.forEach(change => {
observer.observe(change);
});body {
transition: .5s background-color;
}
.change {
min-height: 100vh;
background-color: white;
width: 50%;
margin: 40px auto;
}<div class="change" data-color="orange">orange</div>
<div class="change" data-color="blue">blue</div>
<div class="change" data-color="lavender">lavender</div>
<div class="change" data-color="orange">orange</div>
<div class="change" data-color="blue">blue</div>
<div class="change" data-color="lavender">lavender</div>
<div class="change" data-color="orange">orange</div>
<div class="change" data-color="blue">blue</div>
<div class="change" data-color="lavender">lavender</div>
<div class="change" data-color="orange">orange</div>
<div class="change" data-color="blue">blue</div>
<div class="change" data-color="lavender">lavender</div>
<div class="change" data-color="orange">orange</div>
<div class="change" data-color="blue">blue</div>
<div class="change" data-color="lavender">lavender</div>
<div class="change" data-color="orange">orange</div>
<div class="change" data-color="blue">blue</div>
<div class="change" data-color="lavender">lavender</div>
<div class="change" data-color="orange">orange</div>
<div class="change" data-color="blue">blue</div>
<div class="change" data-color="lavender">lavender</div>
<div class="change" data-color="orange">orange</div>
<div class="change" data-color="blue">blue</div>
<div class="change" data-color="lavender">lavender</div>Just update the callback function:
if (entry.isIntersecting) {
document.body.style.background = entry.target.getAttribute('data-color');
//to change the background of the div
// entry.target.style.background = entry.target.getAttribute('data-color');
}