Flying clouds

vigge_sWe · December 22, 2008

Anyone could make me a script that could do the thing I am wanting in the pic?

I basically want a sort of cloud effect, where clouds are flying over the header

The clouds should spawn outside the screen and fly over to the outside in the right. Then they should die and spawn again. There should be 2 - 3 clouds at the same times, with variable speed.

I will do the images.

I managed to do this: http://jagf.net/jscloudhelp.html, but that is only halfway as I want and it does not work when there are other divs on the page, and I don't want it to bounce, just spawn outside the screen and fly over and then die outside the window and spawn again.

Psycho · December 22, 2008

This will get you started, but there is some more work I would do:

1. Dynamically set "leftStart" based upon the width of the image(s)

2. Dynamically set leftEnd based upon the width of the image(s) and the width of the window

3. Would revise the script to utilize multiple images

4. Dynamically set y_variation based upon the height of the div container

<html>
<head>
<script type="text/javascript">

var leftStart = -500;
var leftEnd = 1100;

var numberOfCounds = 3
var minSpeed = 0.5;
var maxSpeed = 2.0;
var y_variation = 200;
var clouds_speed = new Array();
var clouds_x_pos = new Array();


function createClouds()
    {
        clouds_speed[idx] = (minSpeed + (Math.random()*(maxSpeed-minSpeed+1)));
        clouds_x_pos[idx] = Math.floor((Math.random()*(leftEnd-leftStart)) + leftStart);

        var y_pos = Math.floor((Math.random()*(y_variation+1)) - parseInt(y_variation/2));

        newCloud = document.createElement('img');
        newCloud.id = 'cloud_' + idx;
        newCloud.src = 'http://jagf.net/cloudfooter.png';
        newCloud.style.position = 'absolute';
        newCloud.style.top = y_pos + 'px';
        newCloud.style.left = clouds_x_pos[idx] + 'px';
        cloudDiv.appendChild(newCloud);
    }    moveClouds();
}

function moveClouds()
{
    for (var idx=0; idx<clouds_speed.length; idx++)
    {
        var cloud = document.getElementById('cloud_' + idx);
        var y_pos = parseInt(cloud.style.top);

        if (clouds_x_pos[idx]>leftEnd) {
            clouds_x_pos[idx] = leftStart;
            y_pos = Math.floor((Math.random()*(y_variation+1)) - parseInt(y_variation/2));
        }
        else
        {
            clouds_x_pos[idx] = clouds_x_pos[idx] + clouds_speed[idx];
        }
        cloud.style.left = Math.floor(clouds_x_pos[idx]);
        cloud.style.top = y_pos;
    }

    setTimeout(moveClouds, 20);

}

</script>
<style type="text/css">
div {position: absolute; top: 0; left: 0; width: 50px; height: 50px;}
</style>
</head>

<body onload="createClouds();" style="background-color:#000000;color:#ffffff;">
<div id="cloudDiv" style="position:absolute;left:0px;top:0px;z-index:1;overflow:hidden;width:100%;height:300px;"></div>

<span>Here is the content of my page<br>
Here is the content of my page<br>
Here is the content of my page<br>
Here is the content of my page<br>
Here is the content of my page<br>
Here is the content of my page<br>
Here is the content of my page<br>
Here is the content of my page<br>
Here is the content of my page<br></span>
</body>
</html>

vigge_sWe · December 22, 2008

That did not work, all I got was this:

Here is the code:

<!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="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">

var leftStart = -500;
var leftEnd = 1100;

var numberOfCounds = 3
var minSpeed = 0.5;
var maxSpeed = 2.0;
var y_variation = 200;
var clouds_speed = new Array();
var clouds_x_pos = new Array();


function createClouds()
    {
        clouds_speed[idx] = (minSpeed + (Math.random()*(maxSpeed-minSpeed+1)));
        clouds_x_pos[idx] = Math.floor((Math.random()*(leftEnd-leftStart)) + leftStart);

        var y_pos = Math.floor((Math.random()*(y_variation+1)) - parseInt(y_variation/2));

        newCloud = document.createElement('img');
        newCloud.id = 'cloud_' + idx;
        newCloud.src = 'images/cloudfooter.png';
        newCloud.style.position = 'absolute';
        newCloud.style.top = y_pos + 'px';
        newCloud.style.left = clouds_x_pos[idx] + 'px';
        cloudDiv.appendChild(newCloud);
    }    moveClouds();


function moveClouds()
{
    for (var idx=0; idx<clouds_speed.length; idx++)
    {
        var cloud = document.getElementById('cloud_' + idx);
        var y_pos = parseInt(cloud.style.top);

        if (clouds_x_pos[idx]>leftEnd) {
            clouds_x_pos[idx] = leftStart;
            y_pos = Math.floor((Math.random()*(y_variation+1)) - parseInt(y_variation/2));
        }
        else
        {
            clouds_x_pos[idx] = clouds_x_pos[idx] + clouds_speed[idx];
        }
        cloud.style.left = Math.floor(clouds_x_pos[idx]);
        cloud.style.top = y_pos;
    }

    setTimeout(moveClouds, 20);

}

</script>
<style type="text/css">
div {position: absolute; top: 0; left: 0; width: 50px; height: 50px;}
</style>
</head>

<body onload="createClouds();">
<div id="cloudDiv" style="position:absolute;left:0px;top:0px;z-index:1;overflow:hidden;width:100%;height:300px;"></div>
<center>
<div id="wrap">
<div id="header">
<div class="navigation">
<a href="index.html">Home</a> • <a href="order.html">Order</a> • <a href="portfolio.html">Portfolio</a>
</div> <!-- Navigation closed -->
</div> <!-- Header closed -->
<div id="footer">
</div> <!-- Footer closed -->
</div><!-- Wrap closed -->
</center>
</body>
</html>

Psycho · December 22, 2008

Something happened during a last minute edit. Here is the correct code:

<html>
<head>
<script type="text/javascript">

var leftStart = -500;
var leftEnd = 1100;

var numberOfCounds = 20
var minSpeed = 1.0;
var maxSpeed = 2.5;
var y_variation = 200;
var clouds_speed = new Array();
var clouds_x_pos = new Array();


function createClouds()
{
    var cloudDiv = document.getElementById('cloudDiv');

    for (var idx=0; idx<numberOfCounds; idx++)
    {
        clouds_speed[idx] = (minSpeed + (Math.random()*(maxSpeed-minSpeed+1)));
        clouds_x_pos[idx] = Math.floor((Math.random()*(leftEnd-leftStart)) + leftStart);

        var y_pos = Math.floor((Math.random()*(y_variation+1)) - parseInt(y_variation/2));

        newCloud = document.createElement('img');
        newCloud.id = 'cloud_' + idx;
        newCloud.src = 'http://jagf.net/cloudfooter.png';
        newCloud.style.position = 'absolute';
        newCloud.style.top = y_pos + 'px';
        newCloud.style.left = clouds_x_pos[idx] + 'px';
        cloudDiv.appendChild(newCloud);
    }
    moveClouds();
}

function moveClouds()
{
    for (var idx=0; idx<clouds_speed.length; idx++)
    {
        var cloud = document.getElementById('cloud_' + idx);
        var y_pos = parseInt(cloud.style.top);

        if (clouds_x_pos[idx]>leftEnd) {
            clouds_x_pos[idx] = leftStart;
            y_pos = Math.floor((Math.random()*(y_variation+1)) - parseInt(y_variation/2));
        }
        else
        {
            clouds_x_pos[idx] = clouds_x_pos[idx] + clouds_speed[idx];
        }
        cloud.style.left = Math.floor(clouds_x_pos[idx]);
        cloud.style.top = y_pos;
    }

    setTimeout(moveClouds, 30);

}

</script>
<style type="text/css">
div {position: absolute; top: 0; left: 0; width: 50px; height: 50px;}
</style>
</head>

<body onload="createClouds();" style="background-color:#000000;color:#ffffff;">
<div id="cloudDiv" style="position:absolute;left:0px;top:0px;z-index:1;overflow:hidden;width:100%;height:300px;"></div>

<span>Here is the content of my page<br>
Here is the content of my page<br>
Here is the content of my page<br>
Here is the content of my page<br>
Here is the content of my page<br>
Here is the content of my page<br>
Here is the content of my page<br>
Here is the content of my page<br>
Here is the content of my page<br></span>
</body>
</html>

However, your code above has these lines:

<style type="text/css">
div {position: absolute; top: 0; left: 0; width: 50px; height: 50px;}
</style>

It doesn't mess up the script since the div for the clouds has style properties set in-line. But, I don't see why you would want to globally set the position of all divs on the page. You should remove that. If that is for the links at the top of the page, then set those properties directly in the div or create a class name that is defined in the STYLE and set within the appropriate div.

vigge_sWe · December 23, 2008

Yes that fixed it, but the clouds aren't coming :/

vigge_sWe · December 23, 2008

Also, now the links aren't clickable... It's like the whole template is a image

Psycho · December 23, 2008

I don' know what to tell you. It works perfect for me: http://www.damato.net/clouds.htm

There must be other probelms in the code you are working with.

vigge_sWe · December 23, 2008

yey I got it working somewhat now, http://jagf.net/design/ , it just kind of lags a bit...

Ok this just happens in FF 3.1 beta 2. I would guess it would be somewhat same when the final comes out, or do you think anything else?

Psycho · December 23, 2008

Again, there is something else in yur page that is causing the problem. My page above works perfectly in FF, but yours doesn't seem to move the clouds at all.

vigge_sWe · December 23, 2008

Again, there is something else in yur page that is causing the problem. My page above works perfectly in FF, but yours doesn't seem to move the clouds at all.

Well, it works in IE, and when did something work in IE last time? So it must be something FF related, or I'm just dumb

Psycho · December 23, 2008

Sorry, I should have been more specific. The code I provided above works in both IE and FF - at least with the versions I have on my PC. The page where you incorporated my code doesn't seem to work in FF. So, I have to assume there is other code in the page that is interfering with the code for the clouds.

You might need to take out certain pieces of code to find the offending problem.

Sign In

Flying clouds

Recommended Posts

vigge_sWe

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

vigge_sWe

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

vigge_sWe

Link to comment

Share on other sites

vigge_sWe

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

vigge_sWe

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

vigge_sWe

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information