Jquery Clouds

lunedì, 25 Gennaio 2010

Come realizzare un effetto di movimento nuvole sul background della pagina come quello presente nel sito 🙂

[code=’html’] [/code]

utilizziamo il seguente codice Js per creare le nuvole

[code=’js’] $(document).ready(function() {
for (var i = 0; i < 3; ++i) {
$(“#spnCloudHolder”).append(““);
}
});
[/code]

[code=’css’]
.cloud { position: absolute;
z-index: -1;
display: none;}
[/code]

il valore di z-index negativo serve per portare le nuvole in secondo piano sopra il layer di sfondo

In codice Javascript in Jquery provvede a

1- Mostrare le nuvole

2- Posizionare le Nuvole

inserire le nuvole in una posizione casuale dall’alto e da sinistra

3- Movimento a Sinistra oppure a Destra (direzione del vento )

Se le nuvole si trovano alla destra o al centro dello schermo si muovono verso destra altrimenti se sono nella parte destra dello schermo si muoveranno verso sinistra la velocità di movimento può essere casuale

4- Movimento di ritorno :

Se le nuvole arrivano alla fine dello schermo tornano indietro con il vento contrario.
ecco il codice completo per far funzionare l’effetto

[code=’js’]
$(document).ready(function() {
for (var i = 0; i < 3; ++i) {
$(“#spnCloudHolder”).append(““);
}
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;
}
[/code]

Traduzione dell’articolo dell’ articolo

Tag: ,

Un Commento a “Jquery Clouds”

Lascia un Commento