JSFiddle - React, Tailwind, and code Playground

by Kevin Faulhaber

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<br><br><br>
<h1 class="scroll-fade">header 1</h1>
<br><br>
<h2 class="scroll-fade-long">header 2</h2>
<br><br>
<h3 class="scroll-fade-long-2">header 3</h3>



<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

JavaScript

var sf = $('.scroll-fade');
var sfl = $('.scroll-fade-long');
var sfl2 = $('.scroll-fade-long-2');

    $(window).on('scroll', function(){
        var st = $(this).scrollTop();
        sf.css({
            'opacity' : 1 - st/135,
            'margin-top': -(st/3)+"px"
        });
        sfl.css({
            'opacity' : 1 - st/255,
            'margin-top': -(st/3)+"px"
        });
        sfl2.css({
            'opacity' : 1 - st/355,
            'margin-top': -(st/3)+"px"
        });
    });