How to Add Particle Backgrounds in Oxygen with Particles.js

¡Hola a todos! Hoy os voy a guiar para añadir un fondo de partículas como el de mi página de inicio a un div en Constructor de Oxígeno con una de mis bibliotecas JavaScript de código abierto favoritas, particles.js.

1. Crea tu configuración de partículas

Primero vamos a ir a partículas.js para crear nuestra configuración Vincent Garraeu te permite configurar casi todo de forma superfácil a través de un editor visual en la página web. Ajusta la velocidad, el número de partículas, las líneas, etc., y cuando estés contento con lo que tienes, haz clic en «Descargar la configuración actual». Esto te dará una JSON que utilizaremos dentro de unos minutos.

cromo dimynX6GW0

2. Importar particles.js

Hay varias formas de hacerlo. La forma más correcta es ponerlo en cola con la función de WordPress wp_enqueue_script sin embargo, Oxygen hace que el enqueue sea un poco extraño porque ya no tenemos acceso a los archivos del tema donde normalmente lo haríamos. Si quieres poner en cola el script puedes crear un plugin personalizado para hacerlo, y recomiendo encarecidamente hacer ese método. Puedes seguir mi guía aquí para aprender a hacerlo Alternativamente, si no te apetece eso por el momento, puedes utilizar simplemente una etiqueta típica de script HTML en el pie de página.

Crea un bloque de código en oxígeno en la parte inferior de tu pie de página, y luego añade lo siguiente al HTML:

<!-- Import particles.js -->
<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>

3. Añade un ID al div

A continuación, sólo tenemos que añadir un ID al div que queremos que contenga las partículas en su interior, o simplemente puedes tomar nota del ID que le da automáticamente Oxígeno.

Nota: La posición de este div debe ser relativa.

4. Llama a la función particlesJS()

Ahora es el momento de empezar a ver por fin algún progreso visual. Hay dos maneras de proceder a partir de aquí. La primera opción es subir tu archivo de configuración particles.json a algún lugar de tu servidor, y luego introducir la ruta del archivo en la función particlesJS():

//Wait until the document is loaded
document.addEventListener("DOMContentLoaded", function(){
    /* particlesJS(@dom-id, @path-json)); */
    particlesJS('InsertYourDivIdHere', 'yourpath/particles.json');
});

Si no quieres hacer eso, puedes pegar el contenido de tu archivo particles.json dentro de unas llaves donde normalmente iría la ruta del archivo, así:

//Wait until the document is loaded
document.addEventListener("DOMContentLoaded", function(){
  /*particlesJS.load(@dom-id, @path-json);*/
  particlesJS('InsertYourDivIdHere', {
      //Paste the entire contents of your particles.json here
  });
});

debe ¡ser capaz de ver algunas partículas ahora! (nota: puede que no sean visibles en el backend de Oxygen, así que asegúrate de ver el frontend) Dependiendo de cómo esté configurada tu página, es muy probable que el lienzo de partículas se esté mostrando debajo del div que querías que estuviera, así que te mostraré lo que hice para solucionarlo a continuación.

5. Arreglos de CSS

Si tienes una hoja de estilo personalizada iniciada, ábrela e inserta el siguiente CSS. Si no, crea una nueva y haz lo mismo:

.particles-js-canvas-el{
    position: absolute;
    top: 0;
    z-index: -1; //You will likely need to play around with this
}

En mi sitio, no hay nada detrás del div al que adjunté mis partículas, y establezco mi color de fondo a través de ese div. Si el tuyo es diferente, puede que tengas que ajustar el z-index del lienzo de partículas, entre otras cosas, para que todo esté bien estratificado. Es importante asegurarse de que el texto y los botones tengan un índice mayor que el lienzo de partículas o, de lo contrario, los usuarios no podrán interactuar con ellos.

¡Eso es todo! ¡Espero que esto te haya ayudado a añadir un efecto genial a tus sitios web!



Source by [author_name]

Deja un comentario