JSFiddle - React, Tailwind, and code Playground

HTML

<div id="video-effect-wrapper">
            <video muted autoplay>
                <source src="https://ndvibes.com/test/video/video.mp4" type="video/mp4" id="video">
            </video>
            
            <div id="text-display"></div>
            <div class="text first">
                Scroll down to test this little demo
            </div>
            <div class="text">
                Still a lot to improve
            </div>
            <div class="text">
                So please help me
            </div>
            <div class="text">
                Thanks! :D
            </div>
        </div>
        
        <div id="other-parts-of-website">
            <p>
              Normal scroll behaviour wanted.
             </p>
             <p>
              Normal scroll behaviour wanted.
             </p>
             <p>
              Normal scroll behaviour wanted.
             </p>
             <p>
              Normal scroll behaviour wanted.
             </p>
             <p>
              Normal scroll behaviour wanted.
             </p>
             <p>
              Normal scroll behaviour wanted.
             </p>
        </div>

CSS

body {
                margin: 0;
                padding: 0;
                background-color: green;
            }
            #video-effect-wrapper {
                height: auto;
                width: 100%;
            }
            #video-effect-wrapper video {
                width: 100%;
                height: 100%;
                position: fixed;
                top: 0;
                left: 0;
                z-index: -2;
                object-fit: cover;
            }
            #video-effect-wrapper::after {
                content: "";
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                display: block;
                background: #000000;
                background: linear-gradient(to top, #434343, #000000);
                opacity: 0.4;
                z-index: -1;
            }
            #video-effect-wrapper .text {
                color: #FFFFFF;
                font-weight: bold;
                font-size: 3em;
                width: 100%;
                margin-top: 50vh;
                font-family: Arial, sans-serif;
                text-align: center;
                opacity: 0;
                
                /*
                background-color: blue;
                */
            }
            #video-effect-wrapper .text.first {
                margin-top: 50vh;
                opacity: 1;
            }
            #video-effect-wrapper .text:last-child {
                /*margin-bottom: 100vh;*/
                margin-bottom: 50vh;
            }
            #video-effect-wrapper #text-display {
                display: block;
                width: 100%;
                height: 225px;
                position: fixed;
                top: 50%;
                transform: translate(0, -50%);
                z-index: -1;
                
                /*
                background-color: red;
                */
            }

JavaScript

//Get video element
            let video = $("#video-effect-wrapper video").get(0);
            video.pause();
            
            //Initialize video effect wrapper
            $(document).ready(function() {
            
                //If .first text-element is set, place it in bottom of
                //text-display
                if ($("#video-effect-wrapper .text.first").length) {
                    //Get text-display position properties
                    let textDisplay = $("#video-effect-wrapper #text-display");
                    let textDisplayPosition = textDisplay.offset().top;
                    let textDisplayHeight = textDisplay.height();
                    let textDisplayBottom = textDisplayPosition + textDisplayHeight;
                    
                    //Get .text.first positions
                    let firstText = $("#video-effect-wrapper .text.first");
                    let firstTextHeight = firstText.height();
                    let startPositionOfFirstText = textDisplayBottom - firstTextHeight + 50;
                    
                    //Set start position of .text.first
                    firstText.css("margin-top", startPositionOfFirstText);
                }
            });
            
            //Code to launch video-effect when user scrolls
            $(document).scroll(function() {
                
                //Calculate amount of pixels there is scrolled in the video-effect-wrapper
                let n = $(window).scrollTop() - $("#video-effect-wrapper").offset().top + 408;
                console.log(n);
                n = n < 0 ? 0 : n;

                //If .text.first is set, we need to calculate one less text-box
                let x = $("#video-effect-wrapper .text.first").length == 0 ? 0 : 1;
                
                //Calculate how many percent of the video-effect-wrapper is currenlty scrolled
                let percentage = n / ($(".text").eq(1).outerHeight(true) *...