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: javascript, jquery
good start