Mousemove Animation

function init_bg(){ $(document).on('mousemove', function (event) { //check to make sure there is data to compare against if (typeof(last_position.x) != 'undefined') { //get the change from last position to this position var deltaX = last_position.x - event.clientX, deltaY = last_position.y - event.clientY; //check which direction had the highest amplitude and then figure out direction by checking if the value is greater or less than zero if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX > 0) { //left //console.log('left'); } else if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX < 0) { //right //console.log('right'); } else if (Math.abs(deltaY) > Math.abs(deltaX) && deltaY > 0) { //up //console.log('up'); $p1.css({top: get_new_top($p1, deltaY, 0, 30) + 'px'}); $p2.css({top: get_new_top($p2, deltaY, 0, 60) + 'px'}); $p3.css({top: get_new_top($p3, deltaY, 50, 150) + 'px'}); } else if (Math.abs(deltaY) > Math.abs(deltaX) && deltaY < 0) { //down //console.log('down'); $p1.css({top: get_new_top($p1, deltaY, 0, 30) + 'px'}); $p2.css({top: get_new_top($p2, deltaY, 0, 60) + 'px'}); $p3.css({top: get_new_top($p3, deltaY, 50, 150) + 'px'}); } } //set the new last position to the current for next time last_position = { x : event.clientX, y : event.clientY }; }); } function get_offset_percentage(deltaY){ return deltaY / $(window).height(); } function get_new_top($p, deltaY, top, bottom){ //console.log($p.position()); var total = bottom - top; var t = $p.position().top - (total*get_offset_percentage(deltaY)); if(t > bottom) t = bottom; if(t < top) t = top; return t; } function getCSSValue(pro){ var v = parseInt(pro, 10); return isNaN(v) ? 0 : v; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60

function init_bg(){ $(document).on('mousemove', function (event) {       //check to make sure there is data to compare against     if (typeof(last_position.x) != 'undefined') {           //get the change from last position to this position         var deltaX = last_position.x - event.clientX,             deltaY = last_position.y - event.clientY;           //check which direction had the highest amplitude and then figure out direction by checking if the value is greater or less than zero         if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX > 0) {             //left             //console.log('left');         } else if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX < 0) {             //right             //console.log('right');         } else if (Math.abs(deltaY) > Math.abs(deltaX) && deltaY > 0) {             //up             //console.log('up');             $p1.css({top: get_new_top($p1, deltaY, 0, 30) + 'px'});             $p2.css({top: get_new_top($p2, deltaY, 0, 60) + 'px'});             $p3.css({top: get_new_top($p3, deltaY, 50, 150) + 'px'});         } else if (Math.abs(deltaY) > Math.abs(deltaX) && deltaY < 0) {             //down             //console.log('down');             $p1.css({top: get_new_top($p1, deltaY, 0, 30) + 'px'});             $p2.css({top: get_new_top($p2, deltaY, 0, 60) + 'px'});             $p3.css({top: get_new_top($p3, deltaY, 50, 150) + 'px'});         }     }       //set the new last position to the current for next time     last_position = {         x : event.clientX,         y : event.clientY     }; }); }   function get_offset_percentage(deltaY){ return deltaY / $(window).height(); }   function get_new_top($p, deltaY, top, bottom){ //console.log($p.position()); var total = bottom - top; var t = $p.position().top - (total*get_offset_percentage(deltaY));   if(t > bottom) t = bottom; if(t < top) t = top;   return t; }     function getCSSValue(pro){     var v = parseInt(pro, 10);     return isNaN(v) ? 0 : v; }