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
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 :)
No olviden dejar sus comentarios o dudas aquí abajo en la sección de comentarios :)