¡FELICES FIESTAS!
Wordpress Barcelona

CREAR UN EFECTO DE NIEVE CAYENDO DURANTE LAS FIESTAS CON CSS SOLO USANDO EL CONSTRUCTOR VISUAL DE DIVI.

Para animar mi web este invierno, empece a buscar maneras de añadir una nevada divertida en la cabecera de mi página de inicio. Buscaba algo rápido de instalar, copiar en los otros idiomas, y que pueda cambiar los copos de nieve por logos de WordPress para hacer como si mi fondo de Barcelona se llenará de una dulce nieve de nuestro CMS preferido. Después de probar varias soluciones, me paré en esta. No es la mas bonita de las nevadas, pero es efectiva y pude realizar mis 3 objetivos.

LAS ETAPAS

  1. Cambiar imágenes de los copos
  2. Copiar y adaptar el script CSS
  3. Insertar el CSS en la página
  4. Añadir una linea con el ID #snow arriba del bloque
  5. Crear un suelo con un montón de nieve donde caen los copos (facultativo)
  6. Insertar el suelo en un bloque de separador para PC y móviles

1) Cambiar imágenes de los copos

 

Primero tendrá que crear sus copos de nieve en formato de imgagenes tranparentes tipo PNG.

Yo cree mis copos con el logo de WordPress en varios tamaños, en formato PNG para la transparencia, con una dimension de imagen de 100x100

 

ejemplo de mis 3 copos aquí:

2) Copiar y adaptar el script CSS

#snow{

background: transparent;

font-family: Androgyne;

/* Aquí cambiar las URL de imagenes de copos por las suyas */

background-image: url(‘http://www.tuweb.com/wp-content/uploads/2017/12/copo1.png‘), url(‘http://www.tuweb.com/wp-content/uploads/2017/12/copo2.png‘), url(‘http://www.tuweb.com/wp-content/uploads/2017/12/copo3.png‘);

height: 100%;

left: 0;

position: absolute;

top: 0;

width: 100%;

opacity: 0.6;

z-index:1;

-webkit-animation: snow 20s linear infinite;

-moz-animation: snow 20s linear infinite;

-ms-animation: snow 20s linear infinite;

animation: snow 20s linear infinite;

}

@keyframes snow {

0% {background-position: 0px 0px, 0px 0px, 0px 0px;}

50% {background-position: 500px 500px, 100px 200px, -100px 150px;}

100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}

}

@-moz-keyframes snow {

0% {background-position: 0px 0px, 0px 0px, 0px 0px;}

50% {background-position: 500px 500px, 100px 200px, -100px 150px;}

100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}

}

@-webkit-keyframes snow {

0% {background-position: 0px 0px, 0px 0px, 0px 0px;}

50% {background-position: 500px 500px, 100px 200px, -100px 150px;}

100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}

}

@-ms-keyframes snow {

0% {background-position: 0px 0px, 0px 0px, 0px 0px;}

50% {background-position: 500px 500px, 100px 200px, -100px 150px;}

100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}

}

.et_pb_pagebuilder_layout.single.et_full_width_page #page-container .et_pb_row, .et_pb_pagebuilder_layout.single.et_full_width_portfolio_page #page-container .et_pb_row {

width: 100%;

}

3) Insertar el CSS en la página

Pegar el CSS en la parte dedicada a la configuración del visual builder de esta página:

4) Añadir una linea vacia con el ID #snow arriba del bloque

 

5) Crear un suelo con un montón de nieve donde caen los copos (facultativo)

Por venir

 

6) Insertar el suelo en un bloque de separador para PC y móviles

 

Por venir