E’ arrivato il periodo di Natale e dobbiamo customizzare il nostro sito web rendendolo più invernale e quindi ci viene in gioco l’aggiunta della neve tramite codice javascript. Il codice vale anche per WordPress!
Codice javascript per neve su sito web e wordpress
Ecco come inserire tramite javascript sul nostro sito web la neve che cade mentre il lettore naviga sulle nostre pagine. Potrai modificare il colore dei fiocchi, grandezza minima e massima, ammontare di fiocchi, velocità etc….
/*!
// Snow.js – v0.0.3
// kurisubrooks.com
*/
// Amount of Snowflakes
var snowMax = 100;
// Colore dei fiocchi di neve, in primo piano e in sfondo
var snowColor = [“#fff”, “#e3e1e1”];
// Snow Entity
var snowEntity = “•”;
// Falling Velocity
var snowSpeed = 0.9;
// Minimum Flake Size
var snowMinSize = 16;
// Maximum Flake Size
var snowMaxSize = 30;
// Refresh Rate (in milliseconds)
var snowRefresh = 50;
// Additional Styles
var snowStyles = “cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;”;
/*
// End of Configuration
// —————————————-
// Do not modify the code below this line
*/
var snow = [],
pos = [],
coords = [],
lefr = [],
marginBottom,
marginRight;
function randomise(range) {
rand = Math.floor(range * Math.random());
return rand;
}
function initSnow() {
var snowSize = snowMaxSize – snowMinSize;
marginBottom = document.body.scrollHeight – 5;
marginRight = document.body.clientWidth – 15;
for (i = 0; i <= snowMax; i++) { coords[i] = 0; lefr[i] = Math.random() * 15; pos[i] = 0.03 + Math.random() / 10; snow[i] = document.getElementById("flake" + i); snow[i].style.fontFamily = "inherit"; snow[i].size = randomise(snowSize) + snowMinSize; snow[i].style.fontSize = snow[i].size + "px"; snow[i].style.color = snowColor[randomise(snowColor.length)]; snow[i].style.zIndex = 1000; snow[i].sink = snowSpeed * snow[i].size / 5; snow[i].posX = randomise(marginRight - snow[i].size); snow[i].posY = randomise(2 * marginBottom - marginBottom - 2 * snow[i].size); snow[i].style.left = snow[i].posX + "px"; snow[i].style.top = snow[i].posY + "px";}moveSnow();
}
function resize() {
marginBottom = document.body.scrollHeight – 5;
marginRight = document.body.clientWidth – 15;
}
function moveSnow() {
for (i = 0; i <= snowMax; i++) {
coords[i] += pos[i];
snow[i].posY += snow[i].sink;
snow[i].style.left = snow[i].posX + lefr[i] * Math.sin(coords[i]) + “px”;
snow[i].style.top = snow[i].posY + “px”;
if (snow[i].posY >= marginBottom - 2 * snow[i].size || parseInt(snow[i].style.left) > (marginRight - 3 * lefr[i])) { snow[i].posX = randomise(marginRight - snow[i].size); snow[i].posY = 0; }}setTimeout("moveSnow()", snowRefresh);
}
for (i = 0; i <= snowMax; i++) {
document.write(“” + snowEntity + “”);
}
window.addEventListener(‘resize’, resize);
window.addEventListener(‘load’, initSnow);
Plugin per inserire javascript su sito wordpress
Se usi un sito WordPress scarica e installa questo plugin per inserire codici html, css e js sul tuo sito e poi aggiungi il codice che ti ho passato su e vedrai magicamente apparire la neve sul tuo sito!
Se hai dubbi, commenta qui sotto e ti aiuterò!
