How to make a Clound Image Move?

JavaScript
1

How to make a cloud like the websites below to move ?

www.arbel-designs.com

Thanks.

2

You can:

  1. Create your own animation sequence by using setInterval. During each interval, you can change the top/left CSS properties of the target images.
  2. YOu can use the jQuery animate method to move your images across the screen.
3

Great TommiChi, thank you for your answer.

Can you show the link above example so that I can learn it ?

Thanks.

4

Hi there rosiewp,

here is one possible method for you to try…

[color=navy]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>floating clouds</title>

<style type="text/css">
body {
     background:#444;
     margin:0;
     padding:0;
 }
#clouds {
     height:125px;
     margin-top:100px;
     border-top:1px solid #003;
     border-bottom:1px solid #003;
     background-image:url(http://www.coothead.co.uk/images/floating_clouds.jpg);
 }
</style>

<script type="text/javascript">

  var i=0;
  var speed=25;

function rollClouds() {

   document.getElementById('clouds').style.backgroundPosition=i+'px 0';
      
   i--;
 
   scroller=setTimeout(function(){rollClouds()},speed);
 }

 window.addEventListener?
 window.addEventListener('load',rollClouds,false):
 window.attachEvent('onload',rollClouds);

</script>

</head>
<body>

<div id="clouds"></div>

</body>
</html>
[/color]

coothead

5

Hi,

Here’s a VERY simple page I put together to point out where your possibilities are. Enjoy:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”>
<title>Test Page</title>
<style>
div {
margin:0;
margin-left:0;
width:100px;
height:100px;
overflow:hidden;
position:absolute;
top:50px;
left:50px;
border:solid thin #000;
}
</style>
</head>
<body>

<div>I am a cloud</div>
<script>

function animationSequence(params)
{

var animationArray = , i = 0, iMax = Math.ceil(params.speed / params.interval);
//Linear easing
var diff = Math.round((params.start - params.end) / iMax);
while(i <= iMax) {
animationArray.push(params.start - (diff * i))
i++;
}
animationArray[iMax] = params.end;
return animationArray;

}

function animate(elem, cssProperty, startPoint, endPoint, speed)
{

var params = {
elem: elem,
start: parseInt(startPoint),
end: parseInt(endPoint),
css: cssProperty,
speed: speed,
interval: 20
}

var animationArray = animationSequence(params);
var currPos = function()
{
return parseInt(params.elem.style[params.css]);
}

var i = 0, iMax = animationArray.length - 1;
params.elem.style[params.css] = animationArray[0] +‘px’;
var action = setInterval(function() {
if(currPos() == animationArray[i]) {
i++;
params.elem.style[params.css] = animationArray[i] +‘px’;
}
if(currPos() == animationArray[iMax]) {
clearInterval(action);
}
}, params.interval);

}

animate(document.getElementsByTagName(‘div’)[0], ‘left’, 50, 600, 7000)
</script>
</body>
</html>

6

@coothead @TommiChi

Thank you very much Guys! You are the Man! :slight_smile: