I'm trying to find a plugin, or a line of code that could help me achieve an effect on the background image (the scrolling following the mouse):
http://teddavis.org/
Does anyone think there's a similar way to do that in jQuery so i can add some easing and make this smoother.
Or even, if you know how to put easing on that very code, i'd be grateful too!
Thanks in advance!
Thai
If you check the source of the page you will notice:
<script type="text/javascript" charset="utf-8">
// Simple follow the mouse script
var divName = 'pano'; // div that is to follow the mouse
// (must be position:absolute)
var offX = -5500; // X offset from mouse position
var offY = -000; // Y offset from mouse position
function mouseX(evt) {
if (!evt) evt = window.event;
if (evt.pageX) return evt.pageX;
else if (evt.clientX) return evt.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
else return 0;
}
function mouseY(evt) {
if (!evt) evt = window.event;
if (evt.pageY) return evt.pageY;
else if (evt.clientY) return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
else return 0;
}
function follow(evt) {
if (document.getElementById) {
var obj = document.getElementById(divName).style;
obj.visibility = 'visible';
obj.left = (parseInt(mouseX(evt)*-4)+offX) + 'px';
}
}
document.onmousemove = follow;
function stopscroll(){
document.onmousemove = stop;
}
</script>
seems to be very simple to implement. Just make sure that the variable divName refers to your image or DIV
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With