Inicio Apuntes FPApuntes DAWEfecto nieve, crea una postal navideña con JavaScript

Efecto nieve, crea una postal navideña con JavaScript

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

Publicado por entreunosyceros
Publicado el: Última actualización:

AVISO: Esta entrada tiene más de dos años desde su publicación. Es posible que el contenido esté desactualizado.

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 ...

Deja un comentario

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

Resumen de privacidad
cookies entreunosyceros

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible.

La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudarnos a comprender qué secciones de la web encuentras más interesantes y útiles.

Nunca almacenamos información personal de ningún tipo.

Tienes toda la información sobre privacidad, derechos legales y cookies en nuestra página sobre la política de privacidad o en la página sobre nuestra política de cookies.

Cookies necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.

Cookies de terceros

Esta web utiliza las siguientes cookies adicionales:

- Mailchimp: Recordar si ya estás suscrito al boletín de noticias y sino ofrecértelo al salir.

- Accesibilidad: Para saber tus ajustes de accesibilidad en cada visita.

- Comentarios: Saber si has leído y aceptado nuestra política de privacidad a la hora de dejar un comentario en la web.

- Google Analytics: Localización para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

- Goggle Adsense: Anuncios personalizados según tu geolocalización y preferencias.

Dejar estas cookies activadas nos permite mejorar nuestra web.

Adblock Detectado!!

Ayúdanos deshabilitando la extensión AdBlocker de tu navegador para visitar esta web.
Si no sabes hacerlo en Chrome, consulta el siguiente enlace. Si utilizas Firefox, puedes consultar este otro enlace.
Esto mejorará tu experiencia en este sitio web.