Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2010-11-17
11
Medium Priority
?
997 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 2
  • 2
11 Comments
 
LVL 6

Assisted Solution

by:V4nP3rs13
V4nP3rs13 earned 200 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
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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.

 

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
 

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

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

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

In threads here at EE, each comment has a unique Identifier (ID). It is easy to get the full path for an ID via the right-click context menu. However, we often want to post a short link within a thread rather than the full link. This article shows a…
When asking a question in a forum or creating documentation, screenshots are vital tools that can convey a lot more information and save you and your reader a lot of time
It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages.
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…
Suggested Courses

618 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