Response title
This is preview!
Is it possible to change the speed and direction of an animation during runtime?
in Using jQuery
•
10 years ago
Hi, I'm rather new to Jquery and I've recently been tasked with reimplementing a bit of flash functionality as javascript. What the flash did was essentially allow the user to look at a very large panoramic image by mousing over "window", which I imagine as a fixed sized div container that has its overflow set to hidden.
When the users mouse enters the window, depending on where the mouse position is within the window, the image would scroll in that direction, that is, if the mouse cursor is on the right side of the window, the image would move allowing us to see the rest of the image, and as an added kicker, the farther away you are from the center of the window, the faster it scrolls.
This functionality works the same way anywhere you are on the image, so if your in the upper right area of the window, the image would move allowing us to see the upper right area.
My first approach was to place the image within a fixed sized div container that has its overflow set to hidden, and then using the mouseover event, find out where the current position of the mouse is within the div container relative to its center, and then manipulate the css 'left' and 'top' property accordingly. However, I couldn't necessarily get that working correctly, and now I'm messing with the idea of animating instead, but I would need the animation to change speed and direction depending on where the mouse is within the div container, our 'window' if you will.
below is pretty much what I have at the moment, and I seem to have all of my mouse positions outputting correctly, but finding a good way to vary speed and direction is a whole different matter. Sorry if the code is somewhat of a mess, this is my first post
Any help or advice on how to pull something like this off would be very much appreciated.
When the users mouse enters the window, depending on where the mouse position is within the window, the image would scroll in that direction, that is, if the mouse cursor is on the right side of the window, the image would move allowing us to see the rest of the image, and as an added kicker, the farther away you are from the center of the window, the faster it scrolls.
This functionality works the same way anywhere you are on the image, so if your in the upper right area of the window, the image would move allowing us to see the upper right area.
My first approach was to place the image within a fixed sized div container that has its overflow set to hidden, and then using the mouseover event, find out where the current position of the mouse is within the div container relative to its center, and then manipulate the css 'left' and 'top' property accordingly. However, I couldn't necessarily get that working correctly, and now I'm messing with the idea of animating instead, but I would need the animation to change speed and direction depending on where the mouse is within the div container, our 'window' if you will.
below is pretty much what I have at the moment, and I seem to have all of my mouse positions outputting correctly, but finding a good way to vary speed and direction is a whole different matter. Sorry if the code is somewhat of a mess, this is my first post
Any help or advice on how to pull something like this off would be very much appreciated.
- <!DOCTYPE html>
<html>
<header>
<meta charset="UTF-8">
<title>Index Page</title>
<style type="text/css">
#panorama{
width:300px;
height: 300px;
margin: 100px auto 0 auto;
overflow: hidden;
}
#panorama img{
position: relative;
left:0;
top:0;
}
</style>
</header>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>- $('#panorama img').load(function(){
//get the height and width of the div that holds the image (our window if you will)
var panorama_window_width = $('#panorama').innerWidth();
var panorama_window_height = $('#panorama').innerHeight();
var image_width = $('#panorama img').width();
var image_height = $('#panorama img').height();
//center the image within the window
$('#panorama img').css('left', (-1*$('#panorama img').width()/2) + panorama_window_width/2);
$('#panorama img').css('top', (-1*$('#panorama img').height()/2 + panorama_window_height/2) );
$('#panorama').mousemove(function(e){
//these two lines set the offset to the center of the div that holds the image
//so I can determine how far to the left or how far to the right the mouse cursor
//is
var x = e.pageX - (this.offsetLeft + (panorama_window_width/2));
var y = -1*(e.pageY - (this.offsetTop + (panorama_window_height/2)));
var distance =Math.sqrt(x*x+y*y);
var speed = Math.ceil(distance/10);
$('#heading').html(x +', '+ y);
if(x<0 && y<0){
$('#panorama img').stop().animate({left:0,top:panorama_window_height-image_height},speed,'linear');
}
//if mouse is below center, then we move 'top' in the negative direction
//if mouse is above center, then we move 'top' in the positive direction
//if mouse is to the left of center, then we move 'left' in the positive direction
//if mouse is to the right of center, then we move 'left' in the negative direction
});
});- </script>
- <div id="panorama"><img src="test_photo.jpg" /></div>
</body>
</html>
1