JSFiddle - React, Tailwind, and code Playground

by giovanni gokhan morkoc

HTML

<div class='videoComponent' ></div>

CSS

.videoComponent   {
    width: 500px;
    height: 500px;
    background-color: blue;
}

JavaScript

$(function () {
    var timer;
    var fadeInBuffer = false;
    $(document).mousemove(function () {
        if (!fadeInBuffer) {
            if (timer) {
                console.log("clearTimer");
                clearTimeout(timer);
                timer = 0;
            }

                console.log("fadeIn");
            $('html').css({
                cursor: ''
            });
        } else {
             $('.videoComponent').css({
                cursor: 'default'
            });
            fadeInBuffer = false;
        }


        timer = setTimeout(function () {
            console.log("fadeout");
             $('.videoComponent').css({
                cursor: 'none'
            });
         
            fadeInBuffer = true;
        }, 3000)
    });
    $('.videoComponent-0').css({
                cursor: 'default'
            });
});