CODEWITHSUNDEEP
javascriptjquerycss
KodeFor.Me
KodeFor.Me

Reputation: 13511

Place elements randomly into document background?

I try to create a plugin for personal use, that will place clouds in my web page randomly.

Lets see now what is my idea:

I have create an image with all my clouds.

In my CSS I have create a general class called .cloud that is applyed to all cloud elements and four classes .cloud_1 .cloud_2 .cloud_3 .cloud_4 for each cloud element I like to place in my document.

Here are the css classes I use:

.cloud
{
    display: block;
    position: absolute;
    background: transparent url(../img/clouds.png) no-repeat 0px 0px;
}

.cloud_1
{
    width: 800px;
    height: 350px;
    background-position: 0px 0px;
    z-index: 1;
}

.cloud_2
{
    width: 800px;
    height: 469px;
    background-position: 0px -350px;
    z-index: 2;
}

.cloud_3
{
    width: 800px;
    height: 405px;
    background-position: 0px -819px;
    z-index: 3;
}

.cloud_4
{
    width: 630px;
    height: 314px;
    background-position: 0px -1225px;
    z-index: 4;
}

From the other hand I use jQuery to place generate and place my clouds randomly into my document with random top and left.

The problem I have is that, if I set the position to absolute for .cloud selector the clouds that go out of the document width they activating the horizontal scroll bar. If I set it to fixed, the clouds are attached to the same position while I scroll down and so on.

What is the best solution in order to place my clouds with no horizontal scroll bar and not stay fixed in the same position ?

Extra info

I forgot to tell you that the clouds will animated to the right !

Produced code example

<div class="cloud cloud_3"></div>

and jQuery will adding style attributes like that:

<div class="cloud cloud_3" style="top: 280px; left: 120px;"></div>

Also jQuery will change the left css position in order to animated

Upvotes: 1

Views: 301

Answers (2)

Rory McCrossan
Rory McCrossan

Reputation: 337560

Put the clouds into a containing div withoverflow: hidden set on it. Then when the left position of the cloud is greater than the width of the containing div, move it back to the left so it will scroll accross to the right again.

Upvotes: 1

Andy E
Andy E

Reputation: 344517

Place all the clouds in a <div> with overflow: hidden, and make it the full size of your document. Set that div to z-index: -1 so that it is behind the rest of your content.

Upvotes: 2

Related Questions