Share
Una gran cantidad de pequeñas partículas que se mueven e interactúan entre ellas o con usted tienen un cierto atractivo para ellas. Si alguna vez se encuentra en una situación en la que necesita trabajar con muchas partículas, Particles.js le servirá bien. Como se desprende del nombre, es una biblioteca de JavaScript que puede ayudarlo a crear sistemas de partículas. Además, es ligero, fácil de usar y te da mucho control.
En este tutorial, cubriré todas las características de la biblioteca y le ayudaré a comenzar. Este tutorial es la primera parte de la serie y cubrirá solo lo básico.
Primero, necesitas alojar la biblioteca. Puede subirlo a su propio servidor o usar jsdeliver CDN como yo.
También debe crear un elemento DOM donde Particles.js creará las partículas. Dale algo fácilmente identificable. carné de identidad , para referenciar más tarde.
Ahora, para crear un sistema básico de partículas con la configuración predeterminada, solo necesita una línea de JavaScript para inicializar la biblioteca.
partículasJS ();
Las partículas son por defecto blancas. También están interconectados con finas líneas blancas. Entonces, si no estás viendo nada en este momento, solo cambia el fondo a otra cosa. Aquí está mi CSS para estilizar la partícula. div:
# partículas-js fondo: cornflowerblue;
Intente hacer clic en algún lugar dentro de la demo a continuación. Después de cada clic, Particles.js generará cuatro nuevas partículas más.
A pesar de que solo se necesitaron cuatro líneas de código para crear la demostración anterior, el resultado final podría no ser lo que está buscando. Para mí, las partículas parecen ser un poco más grandes en tamaño y densamente empaquetadas. Tal vez quieras que las partículas tengan una forma diferente o que tengan un tamaño aleatorio. Particles.js le permite establecer todas estas y muchas más propiedades en JSON a las que puede referirse durante la inicialización. La sintaxis general para llamar a la función se verá así:
partículasJS (dom-id, path-json, callback (opcional));
aquí, dom-id es el id del elemento donde quieres que aparezcan las partículas. camino-json es la ruta al archivo JSON con todas las opciones de configuración, y llamar de vuelta Es una función de devolución de llamada opcional. En lugar de una ruta, puede poner directamente su código JSON en el segundo parámetro.
Intentemos crear nevadas usando esta impresionante biblioteca. Al principio, nuestra función se verá como:
Accentsconagua
particulasJS ("nevada", 'activos / snowflakes.json');He eliminado la función de devolución de llamada y he cambiado el DOM Carné de identidad a un nombre más específico. Los copos de nieve tendrán en su mayoría una forma esférica. Caerán hacia abajo y tendrán un tamaño no uniforme. Además, a diferencia de nuestra primera demostración, no estarán conectadas por líneas.
Al principio, nuestra snowflakes.json El archivo tendrá el siguiente código:
"partículas": , "interactividad":
Todas nuestras opciones de configuración relacionadas con propiedades físicas como la forma, el tamaño y el movimiento irán dentro partículas. Todas las opciones de configuración que determinan el comportamiento de interacción irán dentro. interactividad.
Estoy configurando el número de partículas en 100. Esto generalmente dependerá del espacio disponible. Como se mencionó anteriormente, también estableceré la forma en círculo. En este punto, su archivo debería verse como:
"partículas": "número": "valor": 100, "forma": "tipo": "círculo", "interactividad":
Estoy usando un valor de 10 para establecer el tamaño de los copos de nieve. Dado que los copos de nieve varían en tamaño, estableceré aleatorio a cierto. De esta manera, los copos de nieve pueden tener cualquier tamaño entre cero y el límite máximo que especificamos. Para desactivar o eliminar todas las líneas que unen estas partículas, puede configurar habilitar a falso para line_linked.
Para mover partículas alrededor, tendrás que configurar el habilitar propiedad a cierto. Sin ningún otro ajuste, las partículas se moverán al azar como si estuvieran en el espacio. Puede establecer la dirección de estas partículas con un valor de cadena como "fondo". A pesar de que el movimiento general de las partículas es hacia abajo, todavía necesitan moverse un poco al azar para parecer naturales. Esto se puede lograr estableciendo Derecho a falso. En este punto, snowflakes.json Tendrá el siguiente código:
"partículas": "número": "valor": 100, "forma": "tipo": "círculo", "tamaño": "valor": 10, "aleatorio": verdadero, "line_linked": "enable": false, "move": "enable": true, "speed": 2, "direction": "bottom", "straight": false, "interactivity":
Con el código JSON anterior, obtendrás el siguiente resultado:
Si se desplaza sobre la demostración anterior, notará que las líneas aún existen, pero solo se muestran temporalmente durante la activación. Para eliminarlos completamente, puede configurar el habilitar propiedad para el en vuelo estacionario evento a falso. Intente hacer clic dentro de la demostración anterior y notará que cada clic genera cuatro partículas. Este es el comportamiento predeterminado. También puede cambiar el número de partículas utilizando la partículas_nb propiedad bajo empujar. He puesto este número a 12 en este caso.
También puede determinar si se deben detectar los eventos en la ventana o en el lienzo utilizando la detect_on opción.
Aquí está el código completo para el archivo JSON:
"partículas": "número": "valor": 100, "forma": "tipo": "círculo", "tamaño": "valor": 10, "aleatorio": verdadero, "line_linked": "enable": false, "move": "enable": true, "speed": 2, "direction": "bottom", "straight": false, "interactivity": "detect_on": "lienzo", "eventos": "onhover": "habilitar": falso, "modos": "empujar": "partículas_nb": 12
Como puede ver, no tuve que habilitar específicamente el al hacer clic evento. Está habilitado por defecto. Del mismo modo, podría eliminar otras opciones como "detect_on": "lienzo" debajo interactividad y "recto": falso debajo movimiento. Los he guardado para que los principiantes no se confundan con cosas como por qué las partículas no se mueven en línea recta..
Puede probar diferentes valores para modificar los copos de nieve en esta demostración de CodePen.
Comenzar con Particles.js es fácil. Si nunca ha trabajado con sistemas de partículas, esta biblioteca le ayudará a comenzar de inmediato. Este tutorial fue solo una introducción básica a la biblioteca. En los siguientes dos tutoriales de esta serie, cubriré todos los aspectos de esta biblioteca con mucho más detalle..
Si tiene alguna pregunta sobre este tutorial, hágamelo saber en los comentarios..
