Effetto neve javascript

Volete mostrare la neve che cade nel vostro sito?

Se già usate jQuery, esiste un leggerissimo plugin (solo 2 kb) che non necessità di nient’altro che dell’installazione: niente immagini o file css esterni.
Si tratta di jSnow, che offre alcune caratteristiche uniche come la neve che vi segue man mano che scorrete la pagina verticalmente, e numerosi parametri particolarmente versatili per configurare l’effetto dei fiocchi di neve.

link: jSnow , download alternativo

Ecco un altro codice Javascript che ho trovato in giro, e che serve ad aggiungere i fiocchi di neve che cadono lievi-lievi in una pagina web html…
Quello che bisogna fare è copiare lo script subito dopo il tag di apertura BODY ed aggiungere un file NEVE.GIF – che sappresenta il fiocchetto di neve – nella stessa cartella del file HTML.

Ecco lo script…

<script language="JavaScript1.2">
var snowsrc="neve.gif"
var no = 40;
var ns4up = (document.layers) ? 1 : 0;
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
var dx, xp, yp;
var am, stx, sty;
var i, doc_width = 800, doc_height = 600;
if (ns4up||ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
for (i = 0; i < no; i) {
dx[i] = 0;
xp[i] = Math.random()*(doc_width-50);
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20;
stx[i] = 0.02 Math.random()/10;
sty[i] = 0.7 Math.random();
if (ns4up) {
if (i == 0) {
document.write("<layer name="dot" i "" left="15" top="15" visibility="show"><img src='" snowsrc "' border="0"></a></layer>");
} else {
document.write("<layer name="dot" i "" left="15" top="15" visibility="show"><img src='" snowsrc "' border="0"></layer>");
}
} else if (ie4up||ns6up) {
if (i == 0) {
document.write("<div id="dot" i "" style="POSITION: absolute; Z-INDEX: " i "; VISIBILITY: visible; TOP: 15px; LEFT: 15px;"><img src='" snowsrc "' border="0"></a></div>");
} else {
document.write("<div id="dot" i "" style="POSITION: absolute; Z-INDEX: " i "; VISIBILITY: visible; TOP: 15px; LEFT: 15px;"><img src='" snowsrc "' border="0"></div>");
}
}
}
function snowNS() {
for (i = 0; i < no; i) {
yp[i] = sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 Math.random()/10;
sty[i] = 0.7 Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
dx[i] = stx[i];
document.layers["dot" i].top = yp[i];
document.layers["dot" i].left = xp[i] am[i]*Math.sin(dx[i]);
}
setTimeout("snowNS()", 10);
}
function snowIE_NS6() {
for (i = 0; i < no; i) {
yp[i] = sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 Math.random()/10;
sty[i] = 0.7 Math.random();
doc_width = ns6up?window.innerWidth : document.body.clientWidth;
doc_height = ns6up?window.innerHeight : document.body.clientHeight;
}
dx[i] = stx[i];
if (ie4up){
document.all["dot" i].style.pixelTop = yp[i];
document.all["dot" i].style.pixelLeft = xp[i] am[i]*Math.sin(dx[i]);
}
else if (ns6up){
document.getElementById("dot" i).style.top=yp[i];
document.getElementById("dot" i).style.left=xp[i] am[i]*Math.sin(dx[i]);
}
}
setTimeout("snowIE_NS6()", 10);
}
if (ns4up) {
snowNS();
} else if (ie4up||ns6up) {
snowIE_NS6();
}
</script>

Chi vuole aggiungere interattività e dinamicità ai siti Web prima o poi deve confrontarsi con JavaScript

Esiste anche un plugin per WordPress che ci permette di aggiungere fiocchi di neve che cadono (e molto altro) alle pagine del blog: fiocchi, foglie, gocce, palloncini che volano via, …
Si possono facilmente aggiungere le immagini che vogliamo nella cartella giusta, e queste appariranno nel pannello di controllo.

Si possono anche selezionare in quali articoli o pagine l’effetto deve apparire, e in quali no.

link: Snow, balloons and more

Anche il plugin per WordPress Let It Snow! permette di aggiungere la neve alle pagine del nostro blog!
Il plugin ripropone lo stesso codice introdotto nel 2007 dal sito WordPress.com; basta attivare il plugin.

link: Let It Snow!

Neve con HTML5 e CSS3

Si può far nevicare sulle pagine del nostro sito anche usando solo i nuovi codici di HTML e CSS, e senza usare Javascript; su Design Shack è spiegato come fare, ed è anche un ottima lezionoe sulle nuove tecniche.

Altri sono arrivati qui cercando:
neve che cade, gif animate neve che cade, neve che cade animata, gif neve che cade, gif animate neve che scende.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

Ricevi un avviso se ci sono nuovi commenti. Oppure iscriviti senza commentare.

You can add images to your comment by clicking here.