Как заставить различные фоновые изображения загораться при прокрутке страницы?

Question

Я планирую установить шесть различных изображений в качестве фиксированных фоновых изображений, и я надеюсь сделать так, чтобы такие разные изображения загорались в разное время при прокрутке страницы вниз. Но пока у меня проблемы даже с тем, чтобы фоновые изображения отображались. Пока я планирую настроить шесть из них в стилях. css:

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

Но ни один из них не появляется, и я не знаю почему. На остальной части документа также ничего особенного нет, и документы html и css.

Кроме того, после того, как мне каким-то образом удалось установить фоновые изображения, буду ли я использовать Javascript для управления освещением / затемнением изображений при прокрутке? Я думаю о чем-то вроде этого, но я не уверен, что это сработает:

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

Мне очень жаль, если это глупый вопрос, создал аккаунт только для вопроса как я новичок во всем этом. Большое спасибо!

Answer 1

Возможно, что-то не так с вашим CSS, но я не могу сказать наверняка, потому что вы не делитесь всем этим. Исходя из моего опыта, вы можете столкнуться с проблемами, связанными с тегом body. Попробуйте вместо этого использовать div и отследите прокрутку.

Это должно помочь вам начать:

$("#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>

Кроме того: Не всегда все придумывайте сами. Возможно, вы захотите проверить некоторые библиотеки для этого: bounds. js для прокрутки, анимация. css для эффекта.

Также: не забудьте предварительно загрузить изображения, чтобы они уже загружен, когда пользователи достигают точки прокрутки.

Answer 2

URL в свойстве backgorund-image работает со строкой, например: background-image: url("img/background1.png");.

Что касается обнаружения прокрутки - вы думаете в правильном направлении. Вам нужно выполнить некоторые логи c всякий раз, когда пользователь прокручивает, так что у вас это уже есть. То, что должно быть внутри этой функции, зависит от того, как именно вы хотите, чтобы все это работало.