JSFiddle - React, Tailwind, and code Playground

by kiokotzu

HTML

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

CSS

.one, .two, .three {
    width: 450px;
    height: 250px;
}

.one {
    background: url('http://img2.meristation.com/files/imagenes/general/halo-4sks.jpg') no-repeat;
}

.two {
    background: url('http://img2.meristation.com/files/imagenes/general/halo-4sks.jpg') no-repeat;
}

.three {
    background: url('http://img2.meristation.com/files/imagenes/general/halo-4sks.jpg') no-repeat;
}

JavaScript

$.fn.parallax = function(strength) {
    var scroll_top = $(window).scrollTop();
    var move_value = Math.round(scroll_top * strength);
    this.css('background-position-y', '-'+ move_value +'px');
};

$(window).on('scroll', function() {
    $('.one').parallax(0.5);
    $('.two').parallax(0.6);
    $('.three').parallax(0.2);
});