<< İlk Dynamic Data Web Site Sunumumu Gerçekleştirdim | Creating a Jquery Plugin >>

How to make a real cloud effects with jQuery.

by OMR 6. November 2009 19:55

In this article I used the cloud effect birdunyadusun.com site will explain the technique.
Some sites have similar made with Mootools. I did research in jQuery forum. No information about the coding of similar applications. This article has nothing to parallax technique. Let's start coding.
The following code will load the clouds just below is a description of the body.

And using this javascript codes for generating clouds:

$(document).ready(function() {
    for (var i = 0; i < 3; ++i) {
        $("#spnCloudHolder").append("<img src=\"img/bulutcan12.png\" class=\"cloud\" />");
    }
});

You can use this image file(Transparent PNG, thanks AdmiX):

Output current screen:

Any notice for the clouds were not conducted side by side list. Css code to the appropriate notifications must be made with the behavior of clouds. I want to be invisible in the first place. Because the effect of appearing on stage should come. Define the following to do it.

.cloud { position: absolute; z-index: -1; display: none;
}

Emergence of cloud and with the wind to act a little more code needs to be written. I do not write the algorithms work. Functioning as some basic stages are:
1- Show cloud
    Displaying block
2- Cloud repositioning
    Randomly position of top and left.
3- Left or Right move action(wind)
    If the clouds to the right of the midpoint of the screen has stayed right to the left is on the left should animate. Movement speed should also be random.
4- To re-animate:
    The end point of the screen should be given to the multiplication effect. Moments after the collision rate is assigned to be the opposite, and random movement.

Finally javascript code:

$(document).ready(function() {
    for (var i = 0; i < 3; ++i) {
        $("#spnCloudHolder").append("<img src=\"img/bulutcan12.png\" class=\"cloud\" />");
    }
    StartWindForClouds();
});

function ShowTips(_tip) {
    $("#spnTips").html(_tip);
}

var cloudMaxWidth = 185;
function StartWindForClouds() {
    $(".cloud").each(function(i) {
        $(this).css("left", +RandomNumber(15, screen.width - cloudMaxWidth) + "px").css("top", +RandomNumber(0, 200) + "px");
        AniateCloud(this);
    });
}

function AniateCloud(_obj) {
    var tmpLeft = $(_obj).css("left").replace("px", "");
    var docWidth = screen.width;

    var newLeft = "15";
    if (tmpLeft > (docWidth / 2)) {
        newLeft = 15;
    }
    else {
        newLeft = docWidth - cloudMaxWidth;
    }

    $(_obj).slideDown("slow");
    $(_obj).animate({ "left": newLeft + "px" }, RandomNumber(5, 8) * 18000, "linear", function() { new AniateCloud(_obj); });
}
function RandomNumber(min, max) {
    var rnd = Math.floor((max - (min - 1)) * Math.random()) + min;
    return rnd;
}

And final screen shot: