JSFiddle - React, Tailwind, and code Playground

by Ilpo Oksanen

HTML

<nav>
    <ul>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div...

CSS

* {
    padding:0;
    margin:0;
    box-sizing: border-box;
}
nav {
    width:100%;
    height:1000px;
    position:absolute;
}
ul {
    position:relative;
    width:100%;
    height:100%;
}
ul li {
    float:left;
    width:100px;
    height:100px;
    border:1px solid black;
    list-style-type:none;
}
.one {
    width:100%;
    height:100%;
    background:url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRrUppLCZ4-n0iffnGtKKAbOCD_jgmyuR3UMAz4E0rieRvNTGrtcw") center fixed;
    opacity:0.5;
    -webkit-transform:scale(1);
    transform:scale(1);
    /*-webkit-transition:.1s ease all;*/
}

JavaScript

var one = document.getElementsByClassName("one");
var nav = document.getElementsByTagName("nav")[0];
nav.onmousemove=trick;

function trick(e) {
    var x = e.pageX;
    var y = e.pageY;
    function calculateDistance(elem, mouseX, mouseY){
        var halfDiam=elem.offsetWidth/2; //because they're square anyway, no need to calculate this twice
        return Math.sqrt(
            Math.pow(mouseX-(elem.offsetLeft+halfDiam), 2) +
            Math.pow(mouseY-(elem.offsetTop +halfDiam), 2)
        );
    }
    
    for (var i=0; i<one.length; i++) {
        var vektor = calculateDistance(one[i], x, y);
        if(vektor <= 100){
            var sumfin=(100-vektor)*0.01;
            var cislo=1+sumfin; //scale
            var cislo_2=0.5+sumfin; //opacity
            one[i].style.transform="scale("+cislo+")";
            one[i].style.opacity=cislo_2;
        }else{
            one[i].style.transform="scale(1)";
            one[i].style.opacity=0.5;
        }
    }
}