JSFiddle - React, Tailwind, and code Playground

by mackry

HTML

<script src="https://raw.github.com/brandonaaron/jquery-cssHooks/master/boxshadow.js"></script>
<div id="hey">
    <p></p>
</div>

CSS

div {
    margin: 100px auto;
    height: 250px;
    position: relative;
    width: 250px;
    
    border-radius: 100%;
    /*-webkit-transition: all 0.5s ease-in-out;*/
}


div.active {
    border: 1px solid blue;
    -webkit-transform: scale(1.1);
} 

/*    

box-shadow: 0 20px 40px rgba(0,0,0,0.6), 0 11px 1px 5px rgba(0,0,0,0.07), 0 2px  5px rgba(0,0,0,0.2);

div p {
    height: 100%;
    width: 100%;
    border-radius: 100%;
    
    -webkit-transition: all 0.5s ease-in-out;
}

div:active p {
    background: rgba(0,0,0,.2);
    -webkit-transform: scale(.9);
}*/

JavaScript

$('div').click(function() {
    $(this).toggleClass('active');
});

$(document).mousemove(function(e) {
    var offset = rPosition('hey', e.pageX, e.pageY);
    $('#hey').html('x: ' + offset.x + ' y: ' + offset.y);
    
    var shadow1 = '' + (offset.x / 10) + 'px ' + (offset.y / 10) + 'px ' + '40px rgba(0,0,0,0.6)',
        shadow2 = '' + (offset.x / 10) + 'px ' + (offset.y / 10) + 'px ' + '2px 5px rgba(0,0,0,0.07)',
        shadow3 = '' + (offset.x / 50) + 'px ' + (offset.y / 50) + 'px ' + '2px rgba(0,0,0,0.2)';
    
    $('#hey').css({
                '-webkit-box-shadow': shadow1 + ', ' + shadow2 + ', ' + shadow3,
                '-moz-box-shadow': shadow1 + ', ' + shadow2 + ', ' + shadow3,
                'box-shadow': shadow1 + ', ' + shadow2 + ', ' + shadow3
            });
});


function rPosition(elementID, mouseX, mouseY) {
    var el = $('#' + elementID),
        offset = el.offset();

    var x = Math.round(mouseX - (offset.left + (el.width() / 2)));
    var y = Math.round(mouseY - (offset.top + (el.height() / 2)));

    return {
        x: x,
        y: y
    };
}