Cursor Hover Push Effect

by aaron_senecal

HTML

<div class="cursor-push" id="platform"></div>

CSS

body {
    -webkit-perspective: 1200;
    -webkit-transform-style: presere-3d;
}

#platform {
    width: 200px;
    height: 200px;
    background: #ccf;
    position: absolute;
    top: 50px;
    left: 50px;
    -webkit-transition: all 1.5s;
    box-shadow: 0px 0px 10px #000, inset 0px 0px 0px 10px #eee;
}   
.ovl {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 10;
    -webkit-transition: all 1s;
    background-image: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0) 100%);
    opacity: 0;
}

JavaScript

var cursorweight = 10;
$(document).ready(function(){
    $('.cursor-push').append('<div class="ovl"></div>');
    $('.cursor-push').on('mousemove', function(event) {
        var x = (event.pageX - ($(this).offset().left + $(this).outerWidth() / 2)) / ($(this).outerWidth() / cursorweight);
        var y = (event.pageY - ($(this).offset().top + $(this).outerHeight() / 2)) / ($(this).outerHeight() / cursorweight);
        var bx = (event.pageX - $(this).offset().left) /  $(this).outerWidth() * 100 + '%';
        var by = (event.pageY - $(this).offset().top) /  $(this).outerHeight() * 100 + '%';
        var dc = Math.min(0.3, (Math.abs(x) + Math.abs(y)) / (($(this).outerWidth() + $(this).outerHeight()) / (cursorweight)));
        $(this).attr('style', '-webkit-transition: none; -webkit-transform: rotateX('+(-y)+'deg) rotateY('+(x)+'deg); ');     
        $(this).children('.ovl').attr('style', 'opacity: 1; background-image: -webkit-radial-gradient('+bx+' '+by+', ellipse cover, rgba(0,0,0,'+dc+') 0%,rgba(0,0,0,'+dc+') 1%,rgba(0,0,0,0) 100%);');        
    });           
    $('.cursor-push').on('mouseleave', function(){
        $(this).attr('style', '-webkit-transform: rotateX(0deg) rotateY(0deg);').children('.ovl').css('opacity', 0);
    });        
});