Saltar al contenido

Tutorial Particles.js РCrear efecto de Partículas con Javascript

En este tutorial, voy a hablar sobre las particulas.js.¬†Una biblioteca de JavaScript que te permite crear un efecto de part√≠culas din√°micas en tu p√°gina web.¬†Puede personalizar el tama√Īo, la velocidad, el comportamiento del movimiento y mucho m√°s con las part√≠culas.js.¬†Aqu√≠ est√° la¬†p√°gina de¬†demostraci√≥n¬†de part√≠culas.js que le permite probar varias configuraciones y ver c√≥mo funciona realmente.

Preparar entorno de trabajo

Una vez que hayas jugado con la demo, es hora de la implementaci√≥n.¬†Comencemos por descargar la √ļltima versi√≥n de¬†github¬†e importarla a su p√°gina HTML utilizando la etiqueta de script.

A continuaci√≥n, crea un archivo json de configuraci√≥n.¬†Aqu√≠ es donde puede personalizar la opci√≥n de . Voy a utilizar la configuraci√≥n b√°sica provista en el github, que deber√≠a ser un buen comienzo¬†part√≠culas, como tama√Īo, densidad, movimiento, color, etc.

También cambiaré un poco el color ya que el fondo de la página es blanco.

{
  "particles": {
    "number": {
      "value": 80,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#fdefaa"
    },

A continuación, cree un elemento div que desee utilizar como envoltorio de partículas con el ancho y la altura adecuados. También crearé un botón para iniciar el efecto de partículas cuando se haga clic.

<div id="particle-div"></div>
<button id="particle-button">Start</button>
#particle-div {
    margin: 0 auto;
    width:800px;
    height:500px;
}

En el evento de clic, podemos comenzar el método de carga modules.js y proporcionar el ID del elemento contenedor que acabamos de crear, seguido del nombre del archivo json de configuración.

$("#particle-button").click(function(){
          particlesJS.load('particle-div','particle-cfg.json');  
      });

y eso es todo, ya está listo para ir. ¡Vamos a ver cómo funciona!

Cambiar la opción dinámicamente

También puede hacer un cambio en la opción de partículas sobre la marcha. Vamos a crear un botón de actualización.

<button id="update-button">Update</button>

Dentro del controlador de eventos de clic, podemos hacer referencia a la matriz de objetos modules.js y realizar cambios en la configuración como esta. Puede ver la lista completa de estos ajustes en el github . Cuando haya terminado con las actualizaciones, llame al método de actualización de partículas para recoger el cambio.

$("#update-button").click(function(){
        window.pJSDom[0].pJS.particles.number.value = 200;
        window.pJSDom[0].pJS.particles.color.value = "#dccaff"; 
        window.pJSDom[0].pJS.tmp.obj.size_value = 80;   
        window.pJSDom[0].pJS.fn.particlesRefresh();
      });

Y aquí es cuando haces clic en el botón actualizar.

Puedes verlos en acción en el siguiente vídeo:

Código Fuente

<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <script src="jquery-2.1.4.js"></script>
  <script src="particles.js"></script>
  <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
  <div id="navbar"><span>Particles.js</span></div>
  <div id="wrapper">
      <div id="particle-div"></div>
      <button id="particle-button">Start</button>
      <button id="update-button">Update</button>
  </div>
  
  <script>
      $("#particle-button").click(function(){
          particlesJS.load('particle-div','particle-cfg.json');  
      });
      $("#update-button").click(function(){
        window.pJSDom[0].pJS.particles.number.value = 200;
        window.pJSDom[0].pJS.particles.color.value = "#dccaff"; 
        window.pJSDom[0].pJS.tmp.obj.size_value = 80;   
        window.pJSDom[0].pJS.fn.particlesRefresh();
      });
  </script>
  </body>
</html>
#particle-div {
    margin: 0 auto;
    width:800px;
    height:500px;
}
Comparte