LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
Over here !
CSS
html, body { height: 100%; }
body {
    margin: 0;
    background: radial-gradient(#666, #222);
}
.button {
    position: absolute;
    left:50%; top:50%;
    width:140px; height:140px;
    margin:-70px 0 0 -70px;
    cursor: pointer;
}
.compass {
    position: absolute;
    width:100%; height:100%;
    background: #444;
    border-radius: 0 50% 50% 50%;
    border: 10px solid white;
    box-shadow: 0 0 8px rgba(0,0,0,.2);
    border-right-color: coral;
    border-bottom-color: coral;
    transition: border-radius .2s;
    box-sizing: border-box;
}
.button:hover .compass {
    border-radius: 50%;
}
.msg {
    position: absolute;
    width:100%; height:100%;
    line-height: 140px;
    text-align: center;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 300;
}
JS
$(document).on('mousemove', function(e) {
    var x = e.pageX;
    var y = e.pageY;
    var w = $(this).width();
    var h = $(this).height();
    var angle = Math.atan2(y-(h/2), x-(w/2)) * (180/Math.PI);
    var rotate = angle + (180-45);
    $('.button .compass')
        .css('-webkit-transform', 'rotate('+rotate+'deg)')
        .css('-moz-transform', 'rotate('+rotate+'deg)')
        .css('-ms-transform', 'rotate('+rotate+'deg)')
        .css('-o-transform', 'rotate('+rotate+'deg)')
        .css('transform', 'rotate('+rotate+'deg)');
});
Host Instantly Drag and Drop Website Builder

 

Description

Using JS math functions to point towards the user's cursor.
Term
Mon, 11/27/2017 - 21:39

Related Codes

Pen ID
Pen ID
Pen ID