JSFiddle - React, Tailwind, and code Playground

by Arnaud

HTML

<div id="myElement">
</div>

<div id="myElement2">
</div>

<div id="myElement3">
</div>

CSS

#myElement {
    height: 100px;
    width: 100px;
    background-color: blue;
}

#myElement2 {
    height: 100px;
    width: 100px;
    background-color: blue;
}

#myElement3 {
    height: 100px;
    width: 100px;
    background-color: blue;
}

JavaScript

$(function(){
        var $win = $(window),
        w = 0,h = 0,
        opacity = 1,
        getWidth = function() {
            w = $win.width();
            h = $win.height();
        };

        $win.mousemove(function(e) {
            getWidth();
            opacity = (e.pageX/w * 0.5) + (e.pageY/h * 0.5);
            $('#myElement').css('opacity',opacity);

        });
        
                $win.mousemove(function(e) {
            getWidth();
            opacity = (e.pageX/w * 0.25) + (e.pageY/h * 0.25);
            $('#myElement2').css('opacity',opacity);

        });
        
                $win.mousemove(function(e) {
            getWidth();
            opacity = (e.pageX/w * 0.1) + (e.pageY/h * 0.1);
            $('#myElement3').css('opacity',opacity);

        });
    });