En este tutorial, voy a hablar sobre las particulas.js. Una biblioteca de JavaScript que te permite crear 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.
Tutorial Particles.js – Crear efecto de Partículas con Javascript
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;
}
También te puede interesar:
| Efectos en css |
| Generar pdf desde HTML con JavaScript |
| Gif barra de progreso |