Эффект параллакса - PullRequest
Новая
       98

Эффект параллакса

2 голосов
/ 05 марта 2020

Я экспериментирую с некоторыми эффектами параллакса. В моем HTML есть 5 коробок, которые должны двигаться с эффектом параллакса. Моя проблема в том, что когда я прокручиваю окно, все div не двигаются, однако в консоли javascript, кажется, работает хорошо. Я не могу найти источник проблемы. 

$(document).on('scroll', function() {
  var pixels = $(document).scrollTop();

  $('div.box-1').css('top', pixels * -0.5);
  $('div.box-2').css('top', pixels * -0.25);
  $('div.box-4').css('top', pixels * 0.25);
  $('div.box-5').css('top', pixels * 0.5);
});
body {
  width: 500px;
  height: 3000px;
  margin: 300px auto;
  background-color: #fff;
}

div.box {
  float: left;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

div.box-1 {
  background: red;
}

div.box-2 {
  background: orange;
}

div.box-3 {
  background: yellow;
}

div.box-4 {
  background: green;
}

div.box-5 {
  background: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box box-4"></div>
<div class="box box-5"></div>
<div class="box box-2"></div>
...