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!

Autore: Luigi Lacquaniti

Web designer freelance.

Condividi su