En este video tutorial aprenderemos como añadir un efecto de nieve a nuestro sitio web. De esta forma podemos celebrar las fiestas con nuestros visitantes. Es importante seleccionar correctamente el tipo de efecto que añadiremos, ya que podríamos terminar sobre cargando nuestro sitio web y hacer que se vea lento, es por eso que en este video te mostrare como añadir el efecto de nieve óptimamente.
https://vimeo.com/193742138
En este video utilizamos el plugin: WP Super Snow para añadir el efecto de nieve a nuestra web.
[x_accordion_item title=»Transcripción del video»]
Bienvenido a este nuevo video tutorial, mi nombre es José Lievano y en esta ocasión te mostrare como añadir un efecto de nieve en tu sitio web para navidad. Para añadirle este efecto a nuestro sitio web vamos a utilizar un plugin gratuito del directorio de WordPress.
Así que vamos hacia plugins y añadir nuevo. Y ahora buscamos el plugin WP Super Snow. Lo tenemos aquí, es el plugin creado por WebSharks, Inc. Así que damos clic en instalar y una vez termine en activar. Muy bien, una vez se activa, podrás ver una nueva opción llamada super snow en el menú principal.
Esta es la pagina de configuración del plugin. Aunque hemos activado el plugin anteriormente, el efecto se encuentra desactivado por defecto. Así que debes activarlo manualmente para que pueda aparecer en tu sitio web. Normalmente únicamente necesitas activar el efecto y eso sería todo, este plugin utiliza css y Jquery, pero es muy liviano por lo que no debería ocasionarte lentitud en tu sitio web. Así que activamos el efecto y damos clic en este botón para guardar los cambios.
Muy bien, ahora que activamos el efecto vamos a entrar en nuestro sitio web para ver como ha quedado. Y como puedes ver ahora tenemos este efecto de nieve en nuestro sitio web. Si vamos hacia otra página podrás ver que también funciona ahí, y también dentro de los artículos. De modo que el efecto se añade en todo nuestro sitio web.
Como te decía antes, esto es tan fácil de añadir como activar el plugin, luego el efecto dentro de las opciones del plugin y listo. Sin embargo este plugin tiene más opciones con las que podemos jugar he incluso añadir nuestros propios copos de nieve. Así que regresemos a nuestra área de administración.
Muy bien y damos clic sobre estas opciones. Desde aquí podemos ver todas las opciones configurables para modificar la forma en la que se ve nuestra pequeña ventisca polar. Muy bien, en la primera opción podemos definir dentro cual etiqueta HTML deseamos cargar el efecto, te recomiendo dejar esta opción como se encuentra, ya que en este momento se encuentra cargando el efecto dentro del body.
Ósea que aparecerá en todo el contenido que podemos ver en el sitio web. Pero si sabes lo que estás haciendo, puedes añadir el efecto únicamente en un etiqueta especifica. Desde la siguiente opción podemos cambiar el parámetro z-index para los copos de nieve, este parámetro es el que permite a los copos mostrarse al frente de todo nuestro contenido, si tú conoces css entonces puedes jugar con este parámetro si sabes lo que estás haciendo.
De lo contrario te recomiendo dejarlo como se encuentra. En la siguiente opción podemos añadir nuestros propios copos de nieve. Debes colocar una URL hacia la imagen del copo de nieve por línea. Vamos a subir dos copos de nieve personalizados. Así que vamos a medios y damos clic en añadir nuevo. Muy bien, ahora vamos a subir nuestras dos nuevas imágenes. Te recomiendo mucho que las imágenes sean PNG y que tengan fondo transparente.
También deberías colocarle a la imagen el nombre de flake, y si tienes muchas, puedes nombrarlas como flake1, flake2, etc… como en este caso. Ya que si la imagen tiene la palabra flake en la URL, entonces el plugin añadirá movimientos 3d en la animación. Así que seleccionamos nuestras imágenes y las subimos. Una vez que se terminan de subir, vamos a necesitar conocer la URL de cada imagen, así que vamos a la bliblioteca de medios.
Tenemos aquí nuestras dos nuevas imágenes, ahora vamos a dar clic en editar. Y en esta zona puedes ver que indica la URL del archivo, así que simplemente lo copiamos, regresamos a las opciones de super snow y lo pegamos en la siguiente línea. Muy bien, y hacemos los mismo con la otra imagen. Vamos a entrar en su edición, debemos copiar la url y la pegamos en la siguiente línea.
Ahora ya hemos añadido nuestros dos copos de nieve personalizados. Y podemos previsualizar como se verán sin necesidad de guardar los cambios. Simplemente debes dar clic en el botón de previsualizar. Y aquí puedes ver el efecto utilizando nuestros nuevos copos de nieve. Muy bien, pasemos a la siguiente opción. En este campos podemos indicar la cantidad máxima de copos de nieve que deseamos tener en pantalla al mismo tiempo.
Si deseas aumentar la cantidad de copos de nieve, debes tomar en cuenta que a mayor cantidad tu sitio web podría ver lento. Hagamos una pequeña prueba y exageremos esto, colcoaremos 500. Y vamos al previsualizador. Hay demasiados copos de nieve e incluso mi área de administración se comienza a ver lenta, entonces te recomiendo que como máximo lo coloques en 75.
Voy a dar clic otra vez en previsualizar, en caso contrario mi escritorio seguirá lento. Dentro de la siguiente opción podemos definir el tamaño máximo que puede tener un copo en pixeles, actualmente es de 50 pero puedes cambiarlo si lo deseas. La opción que se encuentra abajo nos permite modificar el tiempo de duración máximo en la animación.
De modo que si colocamos un número menor la animación será rápida y con números mayores se vera lenta. Y finalmente en la última opción podemos indicar si deseamos que los copos de nieve tengan transparencia. Por defecto se encuentra en no, debido a que puede cargar un poco tu sitio web, pero la transparencia tiene un mejor efecto visual.
Puedes jugar con todas estas opciones hasta encontrar la forma en la que mas te gusta el efecto y que no tenga inconvenientes con tu web. Vamos a guardar nuestros cambios para aplicarlos.
Muy bien y ahora vamos a ver nuevamente el sitio web. Genial, ahora tenemos nuestros propios copos de nieve y también puedes notar que tienen una transparencia, lo que hace que se vean aún mejor. Espero que este video te sea de ayuda y puedas añadirlo para celebrar la navidad con los visitantes de tu sitio web. Recuerda compartir este video tutorial y dejarnos un like si te ha gustado el efecto. Mi nombre es José Lievano y nos veremos en el siguiente video tutorial.
[/x_accordion_item]