Particles.js es una biblioteca de JavaScript liviana que se usa para crear partículas que se parecen a los vértices de un polígono. También podemos interactuar pasando el cursor sobre las partículas y crear más partículas haciendo clic en las partículas.
Aquí está el ejemplo de partícula.js
Podemos usar esta biblioteca en nuestros portafolios, lo que definitivamente atraerá a muchos usuarios y se verá bien en el sitio web.
Proceso de instalación:
1. Descarga la librería partículas.js desde el siguiente enlace, descomprímelo y cópialo en la carpeta de tu proyecto. https://vincentgarreau.com/particles.js/
2. Cree dos archivos index.html y style.css.
Escriba el siguiente código en el archivo index.html .
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>particles.js</title> <!-- Import style.css from root directory --> <link rel="stylesheet" href="./style.css" /> </head> <body> <!-- Particles.js div --> <div id="particles-js"> <div class="heading"> <h1>GeeksforGeeks</h1> <h3> A computer Science portal for geeks </h3> </div> </div> <!-- Import Particles.js and app.js files --> <script src= "particles.js-master/particles.js"> </script> <script src= "/particles.js-master/demo/js/app.js"> </script> </body> </html>
Nombre de archivo: estilo.css
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
'Open Sans', 'Helvetica Neue', sans-serif;
}
.heading {
position: absolute;
text-align: center;
top: 30%;
width: 100%;
}
.heading h1 {
color: limegreen;
font-size: 70px;
}
.heading h3 {
color: wheat;
font-size: 20px;
}
#particles-js {
background: black;
height: 100vh;
}
3. Guarde el código anterior en los archivos respectivos y ejecute el archivo index.html .
Nota: Si está utilizando la aplicación de Node, simplemente podemos descargar el módulo de Node de partículas.js siguiendo el comando.
npm install particles.js
E importe los archivos partículas.js y app.js de la carpeta node_modules y escriba el código html.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>particles.js</title> <!-- Import style.css from root directory --> <link rel="stylesheet" href="./style.css" /> </head> <body> <!-- Particles.js div --> <div id="particles-js"> <div class="heading"> <h1>GeeksforGeeks</h1> <h3>A computer Science portal for geeks</h3> </div> </div> <!-- Import Particles.js and app.js files --> <script src= "/node_modules/particles.js/particles.js"> </script> <script src= "/node_modules/particles.js/demo/js/app.js"> </script> </body> </html>
Podemos cambiar las propiedades de las partículas y la interactividad modificando app.js y luego ver la magia.
Producción: