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; } |