I'm experimenting some parallax effects. I have 5 boxes in my HTML that should move with a parallax effect. My issue is when I scroll the window all div don't move, however in the console the javascript seems to work well. I can't find where the problem comes from.
$(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>