Como agregar Efecto Partículas animadas en el login de Moodle

El diseño web nos sorprende todos los días. Cada vez existen más efectos que logran que nuestras páginas sean más atractivas e interesantes.

Aunque llevarlas a Moodle puede ser un tanto complicado, dada la estructura de este LMS; pero siempre es satisfactorio mejorarlo estéticamente.

Uno de ellos es el efecto partículas animadas creado a partir del javascript: particles.js.  Podemos ponerlo de fondo en nuestro Moodle y queda fantástico. 😋

En este post, te mostraré como agregar este efecto partículas en el login de Moodle para que luzca mejor que nunca.

Particles.js

Desarrollado por Vincent Garreau, es un javascript que permite partículas animadas en una página web.

En la página web del proyecto particles.js, puedes configurar hasta cinco efectos de partículas que se mueven en la pantalla, y que incluso interactúan con los movimientos del puntero del mouse de tu computadora.

Hay varias variables que se pueden cambiar, como, por ejemplo: tamaño de las partículas, color, densidad, entre otras.

Todo esto, permite personalizar al máximo las partículas para adaptarlo a tus necesidades, y déjame decirte que quedan realmente espectaculares. 🥰

Personalizando las partículas animadas

Para obtener el efecto de partículas animadas, el cual luego vamos a aplicar en el login de nuestro Moodle, dirígete a esta página.

En la parte superior derecha veras el menú que permite personalizarlo según desees.

Para seleccionar los distintos tipos de efectos, lo puedes hacer desde el primer menú descolgable que pone: Default.

En lo particular, me gusta el efecto NASA 👌, que son como círculos animados que simulan estrellas.

Los otros menús descolgables, como el particles e interactivity, permite configurar los distintos valores tales como: más partículas, el color de las mismas, cuántas se mostrarán en la pantalla, qué tanto movimiento tienen, etc.

personalizando particles.js gif animado

Una vez obtengas en pantalla el efecto deseado, deberemos obtener el archivo JSON, que contiene el código para lograr el efecto partículas en el login de Moodle.

Para ello haz clic al vínculo que pone: Download current config (json), ubicado al final de menú y descarga el archivo particlesjs-config.json en tu computadora.

Subiendo el Javascript de Efecto Partículas animadas al Moodle

Ahora vamos a obtener el archivo javascript que nos permite lograr el efecto partículas en el login de Moodle.

Dirígete a la página de proyecto GitHub de particles.js.

Haz clic en el botón descolgable a la derecha que pone Clone or download.  Luego con el link Download ZIP, descarga el archivo particles.js-master.zip en tu computadora.

descargar el archivo efecto partículas de github

Descomprime el ZIP. Obtendremos una carpeta, necesitamos solamente archivo particles.min.js, el cual debemos subir al servidor donde este alojado tu Moodle.

Puedes subirlo al servidor mediante FTP o hacer uso del Administrador de archivos, en caso de tener cPanel u otro gestor en tu servidor.

Una vez en el servidor, ubica el directorio o carpeta donde está el Moodle. Dirígete ahora a la carpeta: theme > boost.

En el directorio boost crearemos una nueva carpeta llamada javascript. Dentro sube el archivo particles.min.js.

agregando javascrip particles.min.js al tema moodle

Para finalizar esta parte en el servidor, ve al directorio principal del tema boost y edita el archivo config.php.

Agrega este código al final: $THEME->javascripts = array('particles.min');

Cuida de no modificar nada más. No olvides Guardar los cambios.

Nota

Puedes modificar el archivo descargándolo en tu computadora para hacer los cambios. El Notepad,  TextEdit o Notepad++ te servirá para editarlo. Luego súbelo al servidor, sustituyendo el anterior.

Si usas cPanel: en el Administrador de archivos, puedes hacer uso del botón Editar en la barra de herramientas, ubicado en la parte superior.

Siempre es recomendable hacer un backup del archivo config.php del tema boost antes de hacer los cambios.

Agregando el Efecto Partículas animadas al login de Moodle

Ahora necesitaremos el archivo particlesjs-config.json que descargamos antes.

Ábrelo con un editor de texto, como los que te mencioné en la nota anterior.

Agrega al principio este código:

Y al final, este otro código:

De modo que el código quedará parecido a esto:

Si aún no lo has agarrado, te dejo un ejemplo del código final:

Ahora copia todo el código resultante. Cuida de que no dejar nada sin copiar.

Logueate en el Moodle como administrador y ve a: Administración del sitio > Apariencia > HTML adicional.

En el campo que pone Cuando BODY está abierto, pega el código anterior.

Código html json de partículas animadas

Ahora vamos a Administración del sitio > Apariencia> Temas > Boost. Haz clic a la pestaña Ajustes avanzados.

En el campo Raw SCSS, pega este código CSS:

Con eso ya tenemos nuestro efecto de partículas en el login de Moodle. Aunque es muy posible que no puedas verlo. 🤔

Esto se debe, a que, si no personalizaste el color del código JSON, por defecto las partículas son blancas, y como el fondo del login de Moodle del tema boost por defecto también es blanco, pues hay lo tienes, está, pero no lo puedes ver. 😅

Si puedes ver tu efecto de partículas animadas sin problema, hasta aquí llegó el articulo, si no, sigue leyendo.

Agregando un fondo al login de Moodle para el efecto partículas en movimiento

Para solventar esto, tenemos dos maneras:

1. Agregar un fondo de login diferente al blanco

Para ello copia esto en el campo Raw SCSS:

Puedes sustituir el color gris que he puesto,  en el código: cccccc , por el color en hexadecimal que desees.

Por ejemplo, el rojo es: ff0000 , azul marino: 0000ff . Esta herramienta online te puede ayudar.

Puedes optar también por un degradado, que está muy de moda en el diseño web actual.

En lugar de la propiedad CSS background-color, usaríamos, background-image más el código CSS para el degradado, como este: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%)

Lo que nos daría un código como este:

Esta otra herramienta online para degradados te da combinaciones muy agradables.

2. Agregando un fondo de imagen

También puedes agregar una imagen al fondo de login de Moodle, para que resalte el efecto partículas.

Este post te ayuda a agregarlo.

Aunque debes agregar una variación al código que te muestro en el artículo, para que funcione correctamente.

En la primera línea del código, sustituye: body#page-login-index #page-wrapper #page

por esto: body#page-login-index

Quedaría así:

Ahora sí, tu efecto de partículas en el login de Moodle quedó completo. Bonito ¿verdad? 😉

Con esto hemos concluido este artículo, si tienes alguna duda, déjala en los comentarios. Saludos.

Califica este artículo

Puntuación promedio 5 / 5. Votos: 3

Deja un comentario

El responsable de este sitio web es Marit Acuña. La finalidad de los datos es gestionar los comentarios en este blog. El destinatario (donde se almacenan los datos) es el hosting de este blog: Banahosting, ubicado en EEUU. La legitimidad es el consentimiento que otorgas en el formulario. Tienes derecho a acceder, rectificar, limitar y suprimir tus datos según la política de privacidad.

Creando cápsulas de contenido
MicroLearning
con
Alcanza tus metas educativas con el curso
Aprende a hacer MicroVideos, MicroPodcast, Infografías y muchos más. A tus estudiantes le encantara.
Curso online 100% tutorizado por Marit Acuña
Me interesa
Únete y recibe las últimas novedades en tu email.
Suscríbete a Evirtualplus
Suscríbete
política de privacidad
Acepto la
Suscríbete a Evirtualplus
Acepto la política de privacidad
Suscríbete
Suscríbete