Spy Text for mouse

by Bacher

HTML

<div id="circle">
    <h1>Hidden text</h1>
</div>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>

CSS

#circle {
    left: -99999px;
    top: -99999px;
    position: absolute;
    width: 100px;
    height: 100px;
    border: 5px solid #e6795d;
    border-radius: 50%;
    cursor: pointer;
    overflow: hidden;
}

h1 {
    position: absolute;
    width: 300px;
    color: azure;
    text-shadow: 0 0 8px black;
    font: bold 3em Arial;
}

JavaScript

$(function() {
    $(window).on('mousemove', function(ev) {
        setPos(ev.pageX, ev.pageY);
    });
});

function setPos(x, y) {
    var $circle = $('#circle');
    var $text = $('#circle > h1');
    
    $circle.css('left', x - 50);
    $circle.css('top', y - 50);
    $text.css('left', -x + 50 + 100   -x * 0.3);
    $text.css('top', -y + 50          -y * 0.1);
    return;
    $text.offset({
        'left': -x * 0.3,// + 50 + 100,
        'top': -y * 0.1// + 50
    });
}