arrow_back Volver
Inicio keyboard_arrow_right Artículos keyboard_arrow_right Artículo

Let it Snow

Uriel Hernández

CTO de Código Facilito

av_timer 1 Min. de lectura

remove_red_eye 6725 visitas

calendar_today 24 Diciembre 2014

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 :)

Bootcamp FullStack con JavaScript

Más información

Inscripciones Abiertas.