Solved

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

Posted on 2010-11-17
11
956 Views
Last Modified: 2012-05-10
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?
0
Comment
Question by:KoolV
  • 7
  • 2
  • 2
11 Comments
 
LVL 6

Assisted Solution

by:V4nP3rs13
V4nP3rs13 earned 50 total points
ID: 34154708
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
 

Author Comment

by:KoolV
ID: 34154787
is the .stars the image? do I replace this with the image path?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34154966
0
 

Author Comment

by:KoolV
ID: 34154975
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
 
LVL 6

Expert Comment

by:V4nP3rs13
ID: 34154978
.stars is <img src="IMAGE PATH HERE" class="stars"></img>
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

Author Comment

by:KoolV
ID: 34155064
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
 

Author Comment

by:KoolV
ID: 34155106
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
 

Author Comment

by:KoolV
ID: 34155120
Dreamweaver is also showing a syntax error for this line
$(".stars").animate(marginLeft: "-=200px");
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34155122
Also it is not background image animation...
0
 

Accepted Solution

by:
KoolV earned 0 total points
ID: 34156734
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
 

Author Closing Comment

by:KoolV
ID: 34221377
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

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Perl script to find new files and compress those new files 5 81
AutoHotkey ActiveX Component Error 8 72
AWS CLI issues with Tags 3 65
Need a good Angular tutorial 5 72
I. Introduction In a previous article (http://www.experts-exchange.com/Web_Development/Document_Imaging/A_6537-PaperPort-Upgrade-How-to-download-and-install-updated-versions-of-PaperPort-11-and-12.html) (now deprecated), I discussed how to upgrad…
Use email signature images to promote corporate certifications and industry awards.
Learn the basics of inputting and editing your text components in Prezi. We will cover how to set styles, position, and group your text components. In your Prezi editor, click anywhere on the canvas to add text: A flashing cursor informs you that yo…
Learn how to use the remote presentation tool in Prezi to allow you to harness the power of this cloud based presentation platform. You can show your presentation with a remote audience using this free tool.

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now