JSFiddle - React, Tailwind, and code Playground

by Amit Vishwakarma

HTML

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

CSS

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

.one {
    background: url('http://argentina.travel/pics/2000x857/22dfc17704.jpg') no-repeat;
}

.two {
    background: url('http://argentina.travel/pics/2000x857/52f3b97b05.jpg') no-repeat;
}

.three {
    background: url('http://argentina.travel/pics/2000x857/bbe534ad92.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', '0 -'+ move_value +'px');
};

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