Home Guide JavaScript: aggiungere un effetto caduta di neve

JavaScript: aggiungere un effetto caduta di neve

jquery-logo-snowOggi vedremo come sovrapporre degli elementi animati ad una pagina web e nella fattispecie riprodurremo la caduta di fiocchi di neve, giacché siamo in periodo.

Tale effetto é ottenibile lato client con JavaScript, usando o meno un framework come JQueryMooTools, utilizzando immagini o font come elementi grafici da animare, puntando ad un effetto più o meno realistico o stilizzato, sfruttando un livello, un tag, o l’elemento “canvas“.

L’esempio che ho scelto per voi sfrutta JQuery, ma se non dovesse piacervi, non faticherete a trovare alternative sul web.

Per visualizzarne l’anteprima, vi basterá realizzare una pagina “index.html” strutturata come segue:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js”></script>
<script src=”neve.js”></script>


<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>Neve</title>

</head>

<body>
<script>
$(document).ready( function(){
$.fn.snow();
});
</script>

</body>
</html>

Il secondo ed ultimo file da creare é invece il nostro JavaScript.

Il file neve.js

/**
* jquery.snow – jQuery Snow Effect Plugin
*
* Available under MIT licence
*
* @version 1 (21. Jan 2012)
* @author Ivan Lazarevic
* @requires jQuery
* @see http://workshop.rs
*
* @params minSize – min size of snowflake, 10 by default
* @params maxSize – max size of snowflake, 20 by default
* @params newOn – frequency in ms of appearing of new snowflake, 500 by default
* @params flakeColor – color of snowflake, #FFFFFF by default
* @example $.fn.snow({ maxSize: 200, newOn: 1000 });
*/
(function($){$.fn.snow = function(options){

var $flake = $(‘<div id=”flake” />’).css({‘position’: ‘absolute’, ‘top’: ‘-50px’}).html(‘&#10052;’),
documentHeight = $(document).height(),
documentWidth = $(document).width(),
defaults = {
minSize : 10,
maxSize : 20,
newOn : 500,
flakeColor : “#FFFFFF”
},
options = $.extend({}, defaults, options);

var interval = setInterval( function(){
var startPositionLeft = Math.random() * documentWidth – 100,
startOpacity = 0.5 + Math.random(),
sizeFlake = options.minSize + Math.random() * options.maxSize,
endPositionTop = documentHeight – 40,
endPositionLeft = startPositionLeft – 100 + Math.random() * 200,
durationFall = documentHeight * 10 + Math.random() * 5000;
$flake
.clone()
.appendTo(‘body’)
.css(
{
left: startPositionLeft,
opacity: startOpacity,
‘font-size’: sizeFlake,
color: options.flakeColor
}
)
.animate(
{
top: endPositionTop,
left: endPositionLeft,
opacity: 0.2
},
durationFall,
‘linear’,
function() {
$(this).remove()
}
);
}, options.newOn);

};

})(jQuery);
Come si nota giá al primo colpo d’occhio, lo script in questione provvede a generare un div e a formattarlo automaticamente secondo le proprie esigenze; trattandosi di neve, ovvero di un elemento di colore bianco, per visualizzare l’effetto, dovrete intervenire sullo sfondo per poter apprezzare la caduta dei fiocchi, pena percepirli come disturbo intermittente sul testo. Se proprio non volete sforzarvi, inserite queste righe nell’header:

<style>

body{

background:#000;

}

</style>

cosí facendo avrete la certezza che l’effetto funzioni.

E neve sia!

Luigi Lacquaniti
Web designer freelance.
Articolo precedenteAddio a Ralph Baer, inventore di Pong
Articolo successivoWordPress 4.1 Dinah

LASCIA UN COMMENTO

Please enter your comment!
Please enter your name here

Ultime dal Blog

Linux on Dex ora compatibile con Galaxy S9, S10, e Tab S5e

Uno dei grandi vantaggi del mondo Android è la loro versatilità. Negli ultimi anni, il mondo Samsung nello specifico, ha introdotto una modalità desktop...

“Quanto è affollato il treno?” Google Maps inizia a chiedere più dettagli ai pendolari

Google Maps è una delle applicazioni più utilizzate giornalmente dalla stragrande totalità degli utenti e nei loro labs spesso vengono introdotte in sordina nuove...

Come testare la versione mobile di una pagina web su Desktop

Spesso, per un motivo o per un altro, ci si ritrova a dover testare una pagina web in modalitá Desktop ed a volte il...

Netflix: eliminato il primo mese di prova gratuito

Da qualche settimana Netflix sta attuando nuovi test proponendo diversi piani tariffari, vedasi in India ad esempio, con un piano super economico o in...

Chrome su Desktop presto permetterà l’installazione delle PWA

Google ha già reso disponibile sul suo browser di "test" Canary, una funzione che a mio avviso è molto, ma molto utile, ed allo...