Предложите вариант скролл-эффекта

#javascript #jquery #scroll #parallax

Хочу вставить в страницу невысокую полоску (как в примере) с картинкой, реагирующей
на скролл. По сценарию, фоновая картинка имеет большую высоту, чем блок. При прокрутке
она движется чуть быстрее и успевает показаться полностью, пока движется по вьюпорту.
Подскажите, пожалуйста, низкоуровневый вариант скрипта для изучения. Ванильный JS
или базовый jquery, только в новичковой манере.
Или псевдокод.
Как я представляю: скрипт определяет, когда блок окажется во вьюпорте; в зависимости
от направления "подхода" ставит стартовое положение фона (у верхнего края блока или
у нижнего); на основании высоты вьюпорта устанавливает коэффициент на скорость прокрутки
фона; ну и крутит его, то бишь меняет вертикальную координату фона в блоке в линейной
зависимости от прокрутки окна...



.placeholder {
  height: 50vh;
  background-color: #f99;
}

.parallax {
  height: 100px;
  width: 100%;
  background-color: #bef;
  background: url(http://via.placeholder.com/800x600/995577/777777/?
  text=imageimageimageimage) center center;
  text-align: center;
}

h1 {
  display: inline-block;
}


  
параллакс





    

Ответы

Ответ 1

Делюсь таким вариантом (самым простым), главное тут сам смысл. Используем jQuery,
не забудьте её подключить. Поймете как тут все устроено, тогда и любой более сложный
создадите.



$(document).ready(function () {
  var $window = $(window);
  $('div[data-type="background"]').each(function () {
    var bg = $(this);
    $(window).scroll(function() {
      var yPos = -($window.scrollTop()/bg.data('speed'));
      var coords = '50%' + yPos + 'px';
      bg.css({
        backgroundPosition : coords
      });
    });
  });
});
.placeholder {
  height: 50vh;
  background-color: #f99;
  margin: 0 auto;
  width: 100%;
  background: url(https://i.imgur.com/Blmzdc3.jpg) no-repeat center top fixed;
  background-size: cover;
  position:relative;
}

.parallax {
  height: 250px;
  width: 100%;
  background-color: #bef;
  text-align: center;
}

h1 {
  display: inline-block;
}


параллакс