4

Хочу вставить в страницу невысокую полоску (как в примере) с картинкой, реагирующей на скролл. По сценарию, фоновая картинка имеет большую высоту, чем блок. При прокрутке она движется чуть быстрее и успевает показаться полностью, пока движется по вьюпорту. Подскажите, пожалуйста, низкоуровневый вариант скрипта для изучения. Ванильный 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;
}
<div class='placeholder'></div>
<div class='parallax'>
  <h1>параллакс</h1>
</div>
<div class='placeholder'></div>

1

1 ответ 1

5

Делюсь таким вариантом (самым простым), главное тут сам смысл. Используем 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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='placeholder' data-speed="10" data-type="background"></div>
<div class='parallax'><h1>параллакс</h1></div>
<div class='placeholder'  data-speed="10" data-type="background"></div>

3
  • Благодарю, выглядит довольно ясно. Только не понял, зачем мы записываем window в переменную? 26 янв 2018 в 18:15
  • @AleksandrShemetillo почему так записано - $window, потому что чистое слово window может быть зарезервированным.
    – user262779
    26 янв 2018 в 18:31
  • 1
    @AleksandrShemetillo Читал с на ходу мобильного и не так понял, ну походу еще плюс инфа будет. Переменная тут только потому, что этот код вырван из моего более объемного кода и там она мне нужна. Замените на просто $(window) будет тот же эффект.
    – user262779
    26 янв 2018 в 19:28

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.