Как получить прокрутку фона внутри эффекта изображения с помощью CSS и JS?не уверен, как это назвать

Question

Итак, в сущности, я хочу иметь section, который в какой-то момент на моей странице имеет сплошной фон, а сверху - солнечные очки, которые, когда вы начинаете прокручивать, отражаютСолнцезащитные очки изменяются от нескольких разных изображений, а также некоторые изменения текста под солнцезащитными очками, чтобы соответствовать каждому изменению в солнцезащитных очках.Затем после прокрутки финального изображения вы получите новый section с другой информацией.Я не совсем уверен, как этот эффект называется или как его достичь, хотя я предполагаю, что для этого потребуется значительное количество jquery.

Существующий веб-сайт, демонстрирующий эффект, которого я пытаюсь достичь, - https://software.dakno.com/ с эффектом телефона во второй области вниз по странице.(Я не являюсь владельцем этого сайта и не связан с владельцами).Я использовал инструменты разработчика Chrome, чтобы понять, как он работает, но не зашел слишком далеко.

Сайт, над которым я работаю, - http://zack2171.github.io.Это пример сайта, который я использую для практики CSS и веб-дизайна.Во втором разделе я пытаюсь заставить этот эффект работать.Если бы кто-то мог немного помочь мне и дать несколько советов, это было бы здорово.Спасибо

Answer 1

Чтобы достичь своей цели, вы определенно ищете смесь jQuery и css.Большая часть вашего времени будет посвящена положению прокрутки и тому, какой пиксель (расстояние прокрутки) покрывается показом ваших изображений / текста.Я бы начал выравнивать изображение, которое вы хотите, в положении, которое является фиксированным или абсолютным, чтобы дать вам лучшую настройку.Затем начните играть с Позицией прокрутки jQuery .Мой личный подход заключается в том, чтобы определять прокручиваемое расстояние, и после достижения этих этапов (половина страницы / 3/4 страницы) вы будете использовать jQuery, чтобы проверить положение, а затем отобразить те дополнительные материалы, которые вы хотите показать.Я надеюсь, что этот вид позволит вам найти хороший начальный путь.

Быстрый пример, прокрутите вниз в скрипте ниже и проверьте консоль, в которой он регистрируется!

$(window).scroll(function() {
 console.log($(window).scrollTop());
})

.box {
  background-color:#333;
  height:5000px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box"></div>