JSFiddle - React, Tailwind, and code Playground

by ken tsai

HTML

<span></span>

CSS

body { height: 5000px; }

span { width:100px; height:100px; position:fixed; left:10px; top: 10px; 
background-color: rgba(0, 0, 0, 0);
}

JavaScript

function EasyPeasyParallax() {
    var scrollPos = $(document).scrollTop();
    var targetOpacity = 1;
    scrollPos < 1000 ? targetOpacity = '0.'+ (scrollPos*100)/10 : targetOpacity;
    $('span').css({
        'background-color': 'rgba(0, 0, 0, '+ targetOpacity +')'
    });
    console.log(scrollPos,targetOpacity);
};

$(function(){
    $(window).scroll(function() {
        EasyPeasyParallax();
    });
});