Jquery Clouds

lunedì, 25 gennaio 2010

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

<span id="spnCloudHolder"> </span>

utilizziamo il seguente codice Js per creare le nuvole

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


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

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


$(document).ready(function() {
for (var i = 0; i &amp;amp;amp;lt; 3; ++i) {
$("#spnCloudHolder").append("<img class="\&amp;amp;amp;quot;cloud\&amp;amp;amp;quot;" src="\" alt="" />");
}
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 &amp;amp;amp;gt; (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;
}

Traduzione dell’articolo dell’ articolo

Tag: ,

Un Commento a “Jquery Clouds”

Lascia un Commento