Inicio Apuntes FPApuntes DAW Efecto nieve, crea una postal navideña con JavaScript
Apuntes DAWApuntes FPDesarrollo Web en Entorno Cliente

Efecto nieve, crea una postal navideña con JavaScript

.... si, algunos dicen que ya está aquí la Navidad

Publicado por entreunosyceros

Una vez más aquí. Hoy vengo a dejar un pequeño artículo por algo que me han preguntado esta misma semana. Me fascina que ya a golpe de mediados de Noviembre, ya hay gente pensando en poner efectos navideños en su página web. El caso es que un usuario me ha pedido ayuda para crear el típico efecto nieve en su web. Y aprovechando que estoy haciendo algunas cosas con JavaScript, pues voy a dejar un efecto nieve (un poco básico), creado con este lenguaje.

Esto que vamos a ver es algo «similar» a lo que en su día publique en el artículo Efecto de partículas, cómo crear el tuyo propio e insertarlo en Wordpress. Solo que en este caso no utilizaremos ninguna librería, y crearemos un efecto nieve que se puede colocar en cualquier página web, no solo en Wordpress.

Efecto nieve con JavaScript

Para crear este efecto nieve, tan solo tendremos que crear tres archivos. Pero para hacerlo según los cánones, vamos a crear una carpeta, y dentro de esta, crearemos otras cuatro subcarpetas, en las que meteremos los archivos y la imagen de fondo.

Como dije líneas más arriba, para crear este ejemplo (como el que se puede ver en la imagen anterior), vamos a necesitar tres archivos. El index.html en el que crear la estructura de la web que va a mostrar el efecto. Un archivo .css en el que añadiremos la reglas necesarias para crear la luna, y las estrellas que se iluminan y se apagan. En el archivo .js será en el que creará el efecto de los copos de nieve.

Archivo indes.html

En el archivo index.html crearemos un contenedor para mostrar la luna y las estrellas que se encenderán y apagarán a su alrededor. Además tendremos otro contenedor para el título que cambiará de color al pasar el ratón por encima.

Añadiremos también una imagen que utilizaremos como fondo. Esta imagen la vamos a colocar dentro de una subcarpeta llamada img. El código que debemos pegar en este archivo será el siguiente:

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Efecto nieve con JS</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" />
  </head>
  <body>
    <div class="container">
      <div class="moon">
        <div class="star-1"></div>
        <div class="star-2"></div>
        <div class="star-3"></div>
        <div class="star-4"></div>
      </div>
    </div>
    <div id="titulo">
      <h3>Llegó la navidad</h3>
    </div>
    <img src="img/fondo.png" alt="fondo" id="imagen" />

    <script src="js/script.js"></script>
  </body>
</html>

Archivo style.css

Este archivo, llamado style.css, lo vamos a colocar dentro de una subcarpeta llamada css. Aquí será donde coloquemos las reglas css para el body del cuerpo, para el título, para las estrellas, para la luna y para el fondo de pantalla. El código a guardar dentro del archivo será el siguiente:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Comic Sans MS', sans-serif;
}

body {
  overflow: hidden;
  align-items: center;
  justify-content: center;
  background: #09001a;
}

/* Título */
#titulo {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px;
  border: none;
  font: normal 48px/normal "Warnes", Helvetica, sans-serif;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  -o-text-overflow: clip;
  text-overflow: clip;
  white-space: pre;
  text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 20px rgba(255, 255, 255, 1), 0 0 30px rgba(255, 255, 255, 1), 0 0 40px #00a759, 0 0 70px #00a759, 0 0 80px #00a759, 0 0 100px #00a759;
  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  position: relative;
  z-index: 101;
  bottom: 3em;
}

#titulo:hover {
  text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 20px rgba(255, 255, 255, 1), 0 0 30px rgba(255, 255, 255, 1), 0 0 40px #ff0000, 0 0 70px #ff0000, 0 0 80px #ff0000, 0 0 100px #ff0000;
}

/*Estrellas y luna*/
.star-1 {
  position: relative;
  background-color: #FFFDFD;
  top: 50px;
  left: -10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  box-shadow: 0 0 1px 1px #FFFDFD,
    -70px 150px 1px 0 #FFFDFD,
    290px 150px 1px -1px #a2bf00,
    -90px 100px 1px -1px #cca90c,
    270px 10px 1px 0.11px #FFFDFD,
    390px 80px 1px -0.6px #ccaf0c,
    -30px 120px 3px -1px #a2bf00;
  animation: pulsate 5s ease;
  animation-iteration-count: infinite;
}

.star-2 {
  position: absolute;
  background-color: #FFFF00;
  top: 100px;
  left: -60px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  box-shadow: 0 0 5px 1px #FFFF00,
    -90px 30px 1px 0.09px #FFFF00,
    355px 30px 0.5px 1px #FFFF00,
    400px 90px 1px -1px #FFFF00,
    -50px -30px 1px -1px #FFFF00;
  animation: pulsate 7s ease;
  animation-iteration-count: infinite;
}

.star-3 {
  position: absolute;
  background-color: #FFFF00;
  top: -10px;
  left: -110px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  box-shadow: 0 0 5px 1px #ffff70,
    -90px 30px 1px 0.09px #FFFF00,
    355px 30px 0.5px 1px #ffffb7,
    400px 90px 1px -1px #ffff76,
    -50px -30px 1px -1px #FFFF00;
  animation: pulsate 9s ease;
  animation-iteration-count: infinite;
}

.star-4 {
  position: absolute;
  background-color: #FFFDFD;
  top: -110px;
  left: 30px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  box-shadow: 0 0 1px 1px #FFFDFD,
    -70px 150px 1px 0 #FFFDFD,
    290px 150px 1px -1px #a2bf00,
    -90px 100px 1px -1px #cca90c,
    270px 10px 1px 0.11px #FFFDFD,
    390px 80px 1px -0.6px #ccaf0c,
    -30px 120px 3px -1px #a2bf00;
  animation: pulsate 10s ease;
  animation-iteration-count: infinite;
}

.moon {
  background-color: #fff2ab;
  position: relative;
  left: 40%;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  box-shadow: 5px 0 10px 3px rgba(229, 229, 229, 0.3),
    0 0 10px 2px rgba(229, 229, 229, 0.3),
    5px 0 10px 2px rgba(229, 229, 229, 0.3),
    0 0 3px 2px rgba(229, 229, 229, 0.3);
  top: 150px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.moon::after {
  content: '';
  background-color: rgba(162, 162, 162, 0.81);
  display: block;
  position: absolute;
  left: 160px;
  top: 50px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 2px 0 0 1px rgba(98, 98, 98, 0.51),
    7px 45px 0 -5px rgba(162, 162, 162, 0.9),
    9px 45px 0 -5px rgba(100, 100, 100, 0.51),
    35px 20px 0 -10px rgba(162, 162, 162, 0.9),
    39px 20px 0 -10px rgba(100, 100, 100, 0.51);
}

@keyframes pulsate {
  0% {
    opacity: 0.0;
  }

  50% {
    opacity: 1.0;
  }

  100% {
    opacity: 0.0;
  }
}

/*Fondo*/
#imagen {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 100;
}

Archivo script.js

Este archivo, llamado script.js, lo vamos a colocar en la subcarpeta llamada js. En el código js podremos configurar fácilmente algunos parámetros de la nevada que se va a mostrar en pantalla. Estos parámetros configurables serán los que encontraremos en las 20 primeras líneas.

Dentro del archivo, tan solo tendremos que pegar el siguiente código:

// Valor o letra de los copos
var nieve_forma = "*"

// Numero de copos
var nieve_cantidad = 70;

// Velocidad de caida
var nieve_velocidad = 1.1;

// Tamaño mas grande de los copos
var nieve_copo_grande = 40

// Tamaño mas pequeño de los copos
var nieve_copo_peq = 5

// Colores de los copos se mostraran de forma aleatoria
var nieve_color = new Array("#ddddFF", "#ccccDD", "#aaaacc")

// Tipo de letra de los copos
var nieve_tipo = new Array("Comic Sans MS", "sans-serif")

// Variables
var nieve = new Array()
var x_movimiento = new Array();
var crd = new Array();
var lftrght = new Array();
var marginbottom
var marginright
var tiempo_caida
var i_nieve = 0
var browserinfos = navigator.userAgent


function inicnieve() {
    var nievesizerange = nieve_copo_grande - nieve_copo_peq
    marginbottom = window.innerHeight
    marginright = window.innerWidth

    for (i = 0; i <= nieve_cantidad; i++) {
        crd[i] = 0;
        lftrght[i] = Math.random() * 17;
        x_movimiento[i] = 0.07 + Math.random() / 11
        nieve[i] = document.getElementById("n" + i)
        nieve[i].style.fontFamily = nieve_tipo[aleatorio(nieve_tipo.length)]
        nieve[i].size = aleatorio(nievesizerange) + nieve_copo_peq
        nieve[i].style.fontSize = nieve[i].size
        nieve[i].style.color = nieve_color[aleatorio(nieve_color.length)]
        nieve[i].sink = nieve_velocidad * nieve[i].size / 5
        nieve[i].posx = aleatorio(marginright - nieve[i].size)
        nieve[i].posy = aleatorio(3 * marginbottom - marginbottom - 3 * nieve[i].size)
        nieve[i].style.left = nieve[i].posx + 'px';
        nieve[i].style.top = nieve[i].posy + 'px';
    }
    movnieve()
}

function movnieve() {
    for (i = 0; i <= nieve_cantidad; i++) {
        crd[i] += x_movimiento[i];
        nieve[i].posy += nieve[i].sink
        nieve[i].style.left = nieve[i].posx + lftrght[i] * Math.sin(crd[i]) + 'px';;
        nieve[i].style.top = nieve[i].posy + 'px';

        if (nieve[i].posy >= marginbottom - 2 * nieve[i].size || parseInt(nieve[i].style.left) > (marginright - 3 * lftrght[i])) {
            nieve[i].posx = aleatorio(marginright - nieve[i].size)
            nieve[i].posy = 0
        }
    }
    var tiempo_caida = setTimeout("movnieve()", 50) /*Tiempo de caida*/
}

for (i = 0; i <= nieve_cantidad; i++) {
    document.write("<span id='n" + i + "' style='position:absolute;top:-" + nieve_copo_grande + "'>" + nieve_forma + "</span>")
}

function aleatorio(range) {
    rand = Math.floor(range * Math.random())
    return rand
}

window.onload = inicnieve

Una vez guardado todo en su sitio, solo queda ejecutar el archivo index.html y ver cómo queda en pantalla. Si quieres ver el resultado final de este código, puede dirigirte a la sección de ejemplos de esta web.

Y bueno, con esto puedes pasar esta nevada a cualquier página web tan solo utilizando el archivo JavaScript en la web que te interese. Evidentemente habrá que adaptarlo un poco a lo que quieras mostrar, pero vamos, la idea sería la que se puede ver. Ahora bien, quizás sea un poco pronto demás para empezar a celebrar la Navidad (aun que quizás sea solo cosa mía).

También te puede interesar ...

Añadir una marca de agua a una imagen...

Cómo crear un menú siempre pegado arriba (sticky...

Ejercicio Java. Pasar un número de binario a...

Deja un comentario

Guardar mi nombre, email y sitio web en el navegador para la próxima vez que comente en esta web.

* Al utilizar este formulario, aceptas que este sitio web almacene y maneje tus datos.