Moving background in Ajax

[knutlig]

Hi!

I want to create something similar to <snipped url>, and im looking into the possibility to do this in Ajax.

What i neet to have is a large background image that is bigger than the browserwindow, that will move when the mouse moves to the edges of the browser window.

Can this be done in Ajax, and can someone give me any hints on how to get started?

[edited by: whoisgregg at 8:04 pm (utc) on Sep. 5, 2009]
[edit reason] Whoops, no URLs please. See TOS [webmasterworld.com] :) [/edit]

[rainborick]

You can emulate the site you mentioned by using JavaScript, but you may have trouble making it perform as well because the other site uses Flash to create the effect. While browser makers have been making great leaps in improving JavaScript's performance, it works in a way that is less efficient at visual effects than Flash. Still, you always can give it a try.

I'd start by creating a pair of nested DIVs. The outer DIV would be the viewing frame. While you'd eventually want to set it to be the size of the user's window, you should probably start with a CSS height and width setting of about 25-40% to allow you to add some manual controls while you're getting the code on its feet. Also set this DIV's style to "overflow:hidden;". Then create a DIV within the viewing frame DIV. Set it to "position:absolute", and it's height and width large enough to accomodate the moving graphic. Be sure to initialize the position of this DIV in your JavaScript so that the values will be available to your motion control code. So you end up with something like:

<div id="viewFrame" style="width:25%; height:25%; overflow:hidden;">
<div id="movingFrame" style="position:absolute; width:1500px; height:1500px;"><img src="backgroundImg.jpg"></div>
</div>

From there, it's a matter of manipulating the "top" and "left" settings of "movingFrame" in your JavaScript. I'd start by adding some buttons to the page to let you move it manually. Then you could try adding code to support a click-and-drag effect. Finally, you just set it up to monitor the mouse position. Good luck!

[whoisgregg]

Welcome to WebmasterWorld, knutlig!

If you are going to use just one giant background image, then there's no need for AJAX. Just load it up and manipulate its position as rainborick describes. :)

Otherwise, you may look into a Google Maps type implementation to fetch new background image tiles as the users scroll around.