How do I get a background image to pan slowly without using flash?

How do I get a background image to pan like I did in this flash intro?
http://www.reidsview.com.au/splash.php

I want to do this using a non flash approach do I use Jquery or similar?
KoolVAsked:
Who is Participating?
 
KoolVConnect With a Mentor Author Commented:
I found the solution here
http://www.catswhocode.com/blog/animated-background-image-with-jquery

and here is what I came up with I am very happy with it
http://www.vizyweb.com.au/animation-example/
0
 
V4nP3rs13Connect With a Mentor Commented:
Add jquery path to your <HEAD>.... then add this:
<script type="text/javascript">
function moveleft() {
$(".stars").animate(marginLeft: "-=200px");
$(".stars").animate(marginLeft: "+=200px");
}

$(function() {
  setInterval("moveleft()", 5000);
}
</script>
0
 
KoolVAuthor Commented:
is the .stars the image? do I replace this with the image path?
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
Michel PlungjanIT ExpertCommented:
0
 
KoolVAuthor Commented:
like this?

How do I add the images?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="css/animate.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
</head>

<body>
<script type="text/javascript">
function moveleft() {
$(".stars").animate(marginLeft: "-=200px");
$(".stars").animate(marginLeft: "+=200px");
}

$(function() {
  setInterval("moveleft()", 5000);
}
</script>
</body>
</
0
 
V4nP3rs13Commented:
.stars is <img src="IMAGE PATH HERE" class="stars"></img>
0
 
KoolVAuthor Commented:
So Like this?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="css/animate.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
</head>

<body>
<script type="text/javascript">
function moveleft() {
$(".stars").animate(marginLeft: "-=200px");
$(".stars").animate(marginLeft: "+=200px");
}

$(function() {
  setInterval("moveleft()", 5000);
}
</script>
<img src="IMAGE PATH HERE" class="stars"></img>
</body>
0
 
KoolVAuthor Commented:
In tried it like this but it just shows then image and no animation

<body>

<script type="text/javascript">
function moveleft() {
$(".stars").animate(marginLeft: "-=200px");
$(".stars").animate(marginLeft: "+=200px");
}

$(function() {
  setInterval("moveleft()", 5000);
}
</script>
<div class="stars">
<img src="images/background.jpg"/>
</div>
</body>
0
 
KoolVAuthor Commented:
Dreamweaver is also showing a syntax error for this line
$(".stars").animate(marginLeft: "-=200px");
0
 
Michel PlungjanIT ExpertCommented:
Also it is not background image animation...
0
 
KoolVAuthor Commented:
The solution I found was so easy and gave such a good result I had to give myself the points but thats for trying you other guys/gals
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.