i want to change

by SebastianPataneMasuelli

HTML

<div id="one">
    
    i want to change
    
</div>
<a id="button">Won't You?</a>
<div id="status"></div>
<div id="you"></div>

CSS

html, body { width: 100%; height: 100%; overflow: hidden; cursor: crosshair; color: lightgray; }
#status, #you, #one, #button{  position: absolute; }
#one { position: absolute; top: 48%; color: transparent; text-shadow:black 5px 5px 2px; font-size: 50px; }
#you {left: 40%; color: gray; bottom: 0; }
#button { 
    -webkit-border-radius: 0.25em 0.25em 0.25em 0.25em; 
    -moz-border-radius: 0.25em 0.25em 0.25em 0.25em;   
    -webkit-box-shadow: 0 0 20px gray; 
    -moz-box-shadow: 0 0 10px lightgray;
    border: 0 solid gray;
    cursor: pointer;
    display: block;
    padding: 5px;
    text-align: center;
    text-shadow: 0px 0px 2px black;
    display: none;
    font-size: 20px;
    color: gray;
}

JavaScript

var firstTime = true;

//intro
$('#one').animate({

    //color: "black",
    left: '40%'

}, 1000, function() {
    // record mouse
    $('#you').html('and you are here');

});

function youWill(mY, mX) {

    if (mY > 348 && firstTime === true) {
        $('#you').hide(250, function() {
            $('#you').html('<br />and you will change me');
            $('#you').show(250, function() {
                $('#button').fadeIn(1000);
            });

            $('#button').css('top', mY - 10).css('left', mX - 120);
        });

        firstTime = false;
    }
}

$('#button').bind('click', function() {
    $('#status, #you, #one, #button').hide('slide',{direction: 'up'},250, function() {
        $('#status, #you, #one, #button').html('goodbye cruel world');
        $('#status, #you, #one').show('slide',{direction: 'down'},250, function() {
            
        });
        $('#status, #you, #one, #button').fadeOut(2000);
    });

});
//get mouse position
$(document).mousemove(function(e) {
    $('#status').html(e.pageX + ', ' + e.pageY);
    $('#status').css('top', e.pageX).css('left', e.pageY);
    // $('#one').css('text-shadow', 'blue '+ e.pageX +'px ' +e.pageX+ 'px 5px;');
    $('#you').css('bottom', '' + e.pageY + 'px'); //.css('left', ''+e.pageX+'px');
    $('#one').css('text-shadow', 'gray ' + e.pageX / 10 + 'px ' + e.pageY / 10 + 'px ' + e.pageY / 20 + 'px');


    youWill(e.pageY, e.pageX);

});