3USD tu primer mes de Premium ūüėĪ Canjear promo No me interesa

notifications Notificaciones

Marcar todas como leídas

Ver m√°s

lightbulb_outline

Let it Snow

timer 1 Min.

remove_red_eye 3023

calendar_today 24/12/14

A prop√≥sito de las fiestas de estas fechas, creamos una p√°gina para agradecer el apoyo a la comunidad durante este a√Īo que pas√≥: http://codigofacilito.com/navidad, una de las caracter√≠sticas de la p√°gina es que se pueden ver copos de nieve caer, tiene un par de variables para simular viento y gravedad, etc.
Ahora, si te gustar√≠a tener algo as√≠ en tu p√°gina web, subimos el script a Github, lo puedes descargar aqu√≠: https://github.com/codigofacilito/snowflakes
Para poder integrarlo en tu p√°gina, primero debes colocar un elemento canvas en tu p√°gina web
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
     <canvas id="mi_canvas"></canvas>
</body>
</html>
No olvides colocarle un ID, en este caso yo le coloqué mi_canvas como ID, tu puedes colocar el que quieras, lo más recomendable es hacer que el canvas ocupe todo el espacio de la pantalla, para ello podemos utilizar un poco de javaScript
var canvas = document.getElementById('mi_canvas');
canvas.width = window.screen.availWidth;
canvas.height = window.screen.availHeight;
Por ahora s√≥lo hemos hecho que el canvas ocupe toda la p√°gina, no veremos nieve; para este paso tienes que descargar los archivos del repositorio que enlac√© m√°s arriba (aqu√≠ est√° de nuevo: https://github.com/codigofacilito/snowflakes) ah√≠ encontrar√°s un archivo javaScript y una imagen, col√≥calos en la carpeta de tu p√°gina; ahora enlaza el script a tu p√°gina
<script src="snowflakes.js"></script>
Siguiente, cargamos la imagen que vamos a usar:
var img = new Image();
img.onload = function(){
        
};
img.src = "snowflake.png";
Y por  √ļltimo dejamos que el script haga su magia dentro del evento onload de la imagen, es muy importante que est√© ah√≠ para que la nieve empiece a crearse cuando la imagen ya ha sido cargada:
img.onload = function(){
        var rain = new Rain("mi_canvas",this);    
        rain.let_it_snow();
};
Nota como le pasamos el id del canvas, que en este caso es mi_canvas, y adem√°s le pasamos la imagen, que est√° representado por this.
No olviden dejar sus comentarios o dudas aquí abajo en la sección de comentarios :)

Otros artículos del blog

Comunidad