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

Netflix: ufficiale l’aumento dei prezzi sui piani Standard (HD) e Premium (UHD)

Era un rumors quasi certo, ed è stato alla fine ufficializzato: Netflix ha aumentato i prezzi su due dei tre piani sottoscrivibili. I piani Standard...

Google Maps: ora visibile anche il tachimetro mentre si guida

Da qualche settimana il famoso navigatore made in Google sta (finalmente) implementando delle funzioni prese in prestito dal suo fratellino Waze. Dopo aver visto...

Mounty: ed i dischi NTFS non sono più un tabù su MacOS

Chi possiede un Mac da diversi anni sa bene quanto sia poco intuitivo ed immediato poter scrivere su un disco esterno in formato NTFS. Il...

Tor Browser: la prima versione stabile è disponibile per Android

Tor, per chi non lo conoscesse, è un sistema di reti che permette di navigare nel web restando completamente anonimi e senza essere tracciati...

Share Mouse: controlla più computer usando un solo mouse

Oggi vi parleremo di Share Mouse, software veramente utile che vi permetterà di poter controllare più computer, usando un solo mouse e una sola...