Cursor grid v2

by Petr Haluza

HTML

<div class="container">
   	<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
   </div>

CSS

.container {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
        }
        .item {
            flex-basis: 33%;
            border: 1px solid #f1f1f1;
            height: 300px;
            box-sizing: border-box; /* Ensure padding and border are included in the width and height */
            transition: border-color 0.3s; /* Smooth transition for border color */
        }

JavaScript

$(document).ready(function() {
    const maxDist = 400;
    const initC = { r: 250, g: 252, b: 255 }; // Initial color
    const newC = { r: 250, g: 10, b: 20 }; // Red color

    $('.container').on('mousemove', function(e) {
        const mX = e.pageX;
        const mY = e.pageY;
        
        $('.item').each(function() {
            const off = $(this).offset();
            const cX = off.left + $(this).outerWidth() / 2;
            const cY = off.top + $(this).outerHeight() / 2;
            
            const dist = Math.sqrt(Math.pow(mX - cX, 2) + Math.pow(mY - cY, 2));
            
            if (dist < maxDist) {
                const r = (maxDist - dist) / maxDist;
                const red = initC.r + r * (newC.r - initC.r);
                const green = initC.g + r * (newC.g - initC.g);
                const blue = initC.b + r * (newC.b - initC.b);

                $(this).css('border-color', `rgb(${red.toFixed(0)}, ${green.toFixed(0)}, ${blue.toFixed(0)})`);
            } else {
                $(this).css('border-color', `rgb(${initC.r}, ${initC.g}, ${initC.b})`);
            }
        });
    });

    // Reset border colors when the cursor leaves the container
    $('.container').on('mouseleave', function() {
        $('.item').css('border-color', `rgb(${initC.r}, ${initC.g}, ${initC.b})`);
    });
});