Aprende como agregar particulas en movimiento en tus sitios web con javascript.

Share on Pinterest
Comparte con tus amigos










Enviar

Hoy vamos aprender como agregar partículas en movimiento a nuestros sitios web, muy útil para agregarlas de fondo y darle un toque muy especial y genial a nuestros proyectos.

Aquí tienes un demo de las partículas en acción:

Demo: http://falconmasters.com/demos/particulas/

En este tutorial te enseñare lo básico de estas particulas, desde como descargarlas hasta como utilizarlas y modificar algunos de los valores mas importantes a nuestro gusto.

Recursos a utilizar

Particulas JS: http://vincentgarreau.com/particles.js/

Proyecto en Github: https://github.com/VincentGarreau/particles.js/

Las partículas JS las podemos descargar directamente desde su web o desde github. Si decides descargarlas directamente te enviara a un archivo js que tienes que descargar, asi que lo que puedes copiar todo el codigo y crear un nuevo archivo llamado particles.js o directamente sobre el código hacer click derecho guardar como y guardas bajo el nombre de particles.js en la carpeta de tu proyecto.

Desde github puedes bajar un demo y la versión minificada del archivo JS.

Como utilizarlas

Para agregarlas a nuestro proyecto es muy sencillo, lo único que necesitas es agregar id="particles-js" a cualquier elemento de tu documento en el que quieras agregar las partículas, lo recomendable seria que las pusieras en un div o directamente agregar el id en el body. Yo lo he hecho de esta ultima forma.

Lo siguiente que tenemos que hacer es bajar el archivo de configuración de las partículas, el cual puedes encontrar de github, o si lo prefieres puedes copiar el código a continuación.

Este código lo pegaras en un nuevo documento, en mi caso lo llamare particulas.js.

Con este archivo podremos modificar algunas propiedades de las partículas, como su color, velocidad entre otros. En el código ya te he comentado las lineas desde las cuales puedes modificar estas ultimas.

Lo siguiente que tenemos que hacer es enlazar nuestros archivos javascript, asi que hasta el final de nuestro documento antes de </body> los agregamos. Quedándonos el final de nuestro código algo similar a esto:

Para poder agregar un fondo asi como lo he hecho en el demo lo unico que tienes que hacer es establecer una imagen de fondo en el body mediante CSS y establecer un background-size:cover;

Y de esta forma ya tendríamos nuestras particulas, si por algun motivo no se muestran en tu proyecto lo mas probable es que tengas algun error con las rutas, recuerda, el archivo que vas a llamar primero es el particles.js que es el archivo que descargamos desde la pagina oficial.

Después de este vamos a llamar al archivo de configuración, que en mi caso le llame particulas.js (nota la diferencia en el nombre, uno esta en ingles y otro en español).

Videotutorial: Como hacer efecto partículas en movimiento con Javascript

Espero que le saquen el mayor provecho a las partículas y si quieren aprender como trabajar con ellas en proyectos aquí tienen un demo y un tutorial.

Demo de sitio “estilo hacker”: http://falconmasters.com/demos/sitio_estilo_hacker/

Tutorial: En redaccion…

Share on Pinterest
Comparte con tus amigos










Enviar

FalconMasters Carlos Arturo

  • Mark

    wow ppara cuando el otro video?

  • Flx Company

    Excelentes tutoriales muchas gracias por los aportes :!

  • Maicol

    Carlos Arturo No Me Salen Las Particulas Ayudame!!

    • Javi A Notes

      Lograste solucionarlo?

  • Maria Emi

    Hola carlos excelente tutorial, me aparen las particulas pero me da un problema con mi menu responsive no deja que se vea, que deberia hacer en este caso?

  • Fernando

    Veo que la Pagina se actualizo a una nueva version (2.0) en este caso no me deja poner las partículas. agradecería tu respuesta!

  • Marlon Ramirez

    en la consola tira un error en el codigo js el de particles.js linea 146 como lo resuelvo

  • Gabriel Navarro

    Hola, disculpa tuve q buscar la version 1.1.0 de particles.js y lo encontre facilmente pero igual no me funciona haciendo todo asi mismo como lo indica el tuto. Saludos.

    • Gabriel Navarro

      Listo, era un error con la version que descargue. Gracias, seguire con el tutorial.

    • Gdx Iver

      hola donde lo encontraste podrias darme el link por favor

      • Gabriel Navarro

        Hola disculpa la tardanza, lo encontre en google. Coloque la version y me aparecio en primera opcion.

  • Sharon Guerrero

    ¿como logro usar las particulas en una parte de la pagina y no en toda?

    • Javi A Notes

      modifica el tamaño del div en los estilos, por ejemplo

      #particles-js{
      width: 700px;
      height: 200px;
      }

  • Davian Bermudez

    Amigo como puedo hacer que las particulas queden de fondo

  • Otoniel

    Hola falcon Tengo problemas con las particulas Nesecito tu Ayuda

  • ca

    hola buenas no concigo que me funciones las particulas alguien me puede ayudar ?

    es urgente¡¡¡

    gracias

    • Javi A Notes

      Que problema tienes?
      Puede ser con las versiones que descargas. No me funcionaba y después de revisar algunos minutos logré solucionar el problema.

  • Matias Aldazabal

    Hola muy bueno el tutorial como siempre! Queria consultarte como hacer para sacar el cuadrado negro que aparece en la parte superior izquierda. Saludos!

  • yarrendel .

    Hola, muy bueno el tutorial, pero Github actualizo las particulas a 2.0.0 y lo que seria la “librea de las particulas” cambiaron un poco las lineas de codigo y solo consegui tener el fondo de color negro.

    • Carlos

      Hola Yarrendel, lo que necesitas para que funcione es agregar el siguiente codigo en particulas.js:

      particlesJS(‘particles-js’,

      {
      “particles”: {
      “number”: {
      “value”: 80,
      “density”: {
      “enable”: true,
      “value_area”: 800
      }
      },
      “color”: {
      “value”: “#ffffff”
      },
      “shape”: {
      “type”: “circle”,
      “stroke”: {
      “width”: 0,
      “color”: “#000000”
      },
      “polygon”: {
      “nb_sides”: 5
      },
      “image”: {
      “src”: “img/github.svg”,
      “width”: 100,
      “height”: 100
      }
      },
      “opacity”: {
      “value”: 0.5,
      “random”: false,
      “anim”: {
      “enable”: false,
      “speed”: 1,
      “opacity_min”: 0.1,
      “sync”: false
      }
      },
      “size”: {
      “value”: 5,
      “random”: true,
      “anim”: {
      “enable”: false,
      “speed”: 40,
      “size_min”: 0.1,
      “sync”: false
      }
      },
      “line_linked”: {
      “enable”: true,
      “distance”: 150,
      “color”: “#ffffff”,
      “opacity”: 0.4,
      “width”: 1
      },
      “move”: {
      “enable”: true,
      “speed”: 6,
      “direction”: “none”,
      “random”: false,
      “straight”: false,
      “out_mode”: “out”,
      “attract”: {
      “enable”: false,
      “rotateX”: 600,
      “rotateY”: 1200
      }
      }
      },
      “interactivity”: {
      “detect_on”: “canvas”,
      “events”: {
      “onhover”: {
      “enable”: true,
      “mode”: “repulse”
      },
      “onclick”: {
      “enable”: true,
      “mode”: “push”
      },
      “resize”: true
      },
      “modes”: {
      “grab”: {
      “distance”: 400,
      “line_linked”: {
      “opacity”: 1
      }
      },
      “bubble”: {
      “distance”: 400,
      “size”: 40,
      “duration”: 2,
      “opacity”: 8,
      “speed”: 3
      },
      “repulse”: {
      “distance”: 200
      },
      “push”: {
      “particles_nb”: 4
      },
      “remove”: {
      “particles_nb”: 2
      }
      }
      },
      “retina_detect”: true,
      “config_demo”: {
      “hide_card”: false,
      “background_color”: “#b61924”,
      “background_image”: “”,
      “background_position”: “50% 50%”,
      “background_repeat”: “no-repeat”,
      “background_size”: “cover”
      }
      }

      );

  • muy bueno!

  • pipohot01

    no me aparecen las partículas, me podrías ayudar?

    muchas gracias

  • Josue Arellano

    https://github.com/VincentGarreau/particles.js/releases/tag/1.1.0 version.1 la v.2 no es compatible y la app.js se privatiso

  • Daniel Sánchez

    ¿en donde puedo encontrar para ponerlo como fondo?

  • jorge paz

    Hola Carlos, sabes cómo se podría poner en mi web de wordpress? con el html puro no me queda claro como se suben esos archivos de js
    Un saludo y gracias por tu aporte

  • Zmplmnt Dey Dx

    me sale con canvas que pueod hacer en ese caso
    para borrar el canvas


Aprende con nuestros cursos

Escribe CSS como un PRO, Curso Básico de SASS

Escribe CSS como un PRO, Curso Básico de SASS

Optimiza, Organiza y escribe tu código CSS como un profesional con SASS.

Inicia el curso
Curso básico de WordPress desde 0

Curso básico de WordPress desde 0

Aprende a utilizar Wordpress desde 0 y crea sitios web, blogs, galerías e incluso tiendas online.

Inicia el curso
Curso cómo hacer un Sitio Web básico con Bootstrap

Curso cómo hacer un Sitio Web básico con Bootstrap

Aprende como hacer un sitio web básico utilizando lo mejor de Bootstrap

Inicia el curso
Curso completo de Bootstrap desde 0

Curso completo de Bootstrap desde 0

Curso básico de Bootstrap, Aprende a crear sitios web adaptables a dispositivos móviles con este poderoso framework.

Inicia el curso