How do I get different background images to light up as I scroll down the page?

user_13009623 0
Viewed 192

I'm planning to set six different images as fixed background images, and I hope to make it that so different ones would light up at different times as I scroll down the page. But so far, I'm having trouble even just getting the background images to show up. So far I'm planning to set up six of these in styles.css:

#background1 {
  background-image: url(img/background1.png);
  background-size: auto;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: left; 
}

But not a single one of them show up and I don't know why. There's not much else on the rest of the document either, both the html and the css documents.

Also after I've somehow managed to put the background images in place, would I be using Javascript to control the lighting/dimming of the images as I scroll? I'm thinking of something along the lines of this, but I'm not sure if it would work:

$(function() {
   $(window).scroll(function () {
      if ($(this).scrollTop() > 100) {
         $(‘body’).addClass(‘dimBackground’)
      }
      if ($(this).scrollTop() < 100) {
         $(‘body’).removeClass(‘dimBackground’)
      }
   });
});

I'm really sorry if this is a dumb question, made an account just for question as I'm new to all of this. Thanks so much!

css javascript
2 Answers

There is probably something wrong with your CSS, but I can't tell for sure, because you're not sharing it all. From my experience you might run into trouble messing with the body tag. Try using a div instead and track the scrolling on that.

This should get you started:

$("#content").scroll(function() {
  if ($(this).scrollTop() > 100) {
    $("#bg").css(
      "background-image",
      "url(https://images.unsplash.com/photo-1558980664-10e7170b5df9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=60)"
    );
  } else {
    $("#bg").css(
      "background-image",
      "url(https://images.unsplash.com/photo-1583369105090-c94b8c87e589?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=60)"
    );
  }
});
body {
  margin: 0;
  padding: 0;
}

#bg {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-position: center;
  background-size: cover;
  background-image: url(https://images.unsplash.com/photo-1583369105090-c94b8c87e589?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=60);
}

#content {
  position: absolute;
  overflow: scroll;
  height: 100vh;
  width: 100vw;
}

#largecontent {
  height: 200vh;
  color:white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="bg"></div>

<div id="content">
  <div id="largecontent">this div is just to force the content div to scroll</div>
</div>

Besides: Don't always invent everything by yourself. You might want to check into some libraries for this one: bounds.js for the scrolling, animate.css for the effect.

Also: Don't forget to preload the images, so they are already loaded when the users arrives at the scrollpoint.

user_123250150

The url in the backgorund-image property works with a string, like so: background-image: url("img/background1.png");.

Regarding scroll detection - you're thinking in the right direction. You need to execute some logic whenever the user scrolls, so you have that down already. What needs to be inside this function depends on exactly how you want the whole thing to work.

user_37445740
Related