JSFiddle - React, Tailwind, and code Playground

by teneff

HTML

<div class="parallax" data-parallax="background-position-y" data-parallax-min="0" data-parallax-max="-500"></div>
<div>empty</div>
<div class="parallax" data-parallax="background-position-y" data-parallax-min="0" data-parallax-max="-500"></div>
<div>empty</div>
<div class="parallax" data-parallax="background-position-y" data-parallax-min="0" data-parallax-max="-500"></div>
<div>empty</div>
<div class="parallax" data-parallax="background-position-y" data-parallax-min="0" data-parallax-max="-500"></div>
<div>empty</div>

CSS

div {
    border: 1px solid black;
    height: 300px;
    margin: 50px 0;
}
div.parallax {
    border-color: red;
    /*
    -webkit-transition:background-position 0.1s linear;  
    -moz-transition:background-position 0.1s linear;  
    -o-transition:background-position 0.1s linear;  
    transition:background-position 0.1s linear;
    *

    background-image: url('http://liamfrankland.com/wp-content/uploads/long-exposure_seascape_photography_cannon-beach-oregon.jpg');
    */
    background-size: cover;
}

JavaScript

$(document).on('scroll', function(){
    w = $(this);
    $('.parallax:first').each(function(){
        var min = $(w).scrollTop() + $(w).height() - $(this).offset().top;
        var max = $(w).scrollTop() + $(this).height() - $(this).offset(top);
        console.log(min, max)
        var value = $(w).scrollTop() - $(this).height() - $(this).offset().top + $(this).data('parallax-min');
        $(this).css($(this).data('parallax'), value + 'px');
    });
});