Efecto copos de nieve

por

Llega la navidad y las webs de toda la red se visten de fiesta para celebrar y dar más emoción a esta época. Para que vosotros también podais vestir vuestras webs de navidad os traigo un script mediante el cual podreis hacer que nieve en vuestra Web.

Este que os enseño funciona perfectamente y no tiene ninguna dificultad de integración.

El ejemplo va enfocado a Liferay pero se puede integrar en cualquier tipo de aplicacion web.

Al final del tutorial podreis descargaros un tema de ejemplo donde podreis obtener todos los recursos necesarios.

Lo primero que debemos hacer es meter en nuestro tema la imagen del copo de nieve. Lo metemos en _diffs/images/custom/copoNieve.gif

Lo siguiente es incorporar al tema la librería JS que realiza el efecto. Para ello añadimos el fichero en _diffs/javascript/snowflakes.js

Y por último, sólo nos queda incluir la librería de los copos en el portal. Lo podemos introducir tanto el el portal_normal.vm del tema(en caso de que queramos el efecto en todas las páginas) o en un portlet cualquiera como contenido web, por ejemplo(en caso de quererlo en páginas determinadas).

La línea que debemos incluir es:

 

En nuestro caso el tema se llama coposNieve-theme, aquí cada uno debería usar el nombre de su tema.

Con esto ya lo tendríamos funcionando. Como comentario he de decir que la librería nos permite modificar ciertos parámetros como la ruta de la que obtener la imagen del copo, el número de copos que caen, etc. Si por algún casual quereis modificarlo, es tan simple como editar la librería directamente. Dentro encontrareis unas variables fácilmente identificables(tiene comentarios verdes) que teneis que cambiar a vuestro gusto.

Aquí os dejo un tema de ejemplo que lo incorpora.

En caso de que vuestro caso no sea para liferay, sería tan simple como usar tanto la librería como la imagen que viene dentro del recurso anterior, modificar la ruta de la imagen en la libreria snowflakes.js e incluirla en vuestra página HTML con el código que pusismos más arriba de inclusión.

También podeis ver un ejemplo de como quedaría en el siguiente pantallazo(eso si, en el portal tendría el efecto de caida como es obvio).

COMENTARIOS

DEJA TU COMENTARIO