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.

/* particlesJS('dom-id', params);
/* @dom-id : set the html tag id [string, optional, default value : particles-js]
/* @params: set the params [object, optional, default values : check particles.js] */

/* config dom id (optional) + config particles params */
particlesJS('particles-js', {
  particles: {
    color: '#fff', // Color del vertice
    color_random: false,
    shape: 'circle', // "circle", "edge" or "triangle" // Establecemos cual de las 3 figuras queremos para vertice
    opacity: {
      opacity: 1, // Opacidad del vertice
      anim: {
        enable: true,
        speed: 1.5,
        opacity_min: 0,
        sync: false
      }
    },
    size: 4,
    size_random: true,
    nb: 150,
    line_linked: {
      enable_auto: true,
      distance: 100,
      color: '#fff', // Color de la arista
      opacity: 1, // Opacidad de la arista
      width: 1,
      condensed_mode: {
        enable: false,
        rotateX: 600,
        rotateY: 600
      }
    },
    anim: {
      enable: true,
      speed: 1 // Velocidad a la que se mueven las aristas
    }
  },
  interactivity: {
    enable: true,
    mouse: {
      distance: 300
    },
    detect_on: 'canvas', // "canvas" or "window"
    mode: 'grab', // "grab" of false
    line_linked: {
      opacity: .5
    },
    events: {
      onclick: {
        enable: true,
        mode: 'push', // "push" or "remove"
        nb: 4
      },
      onresize: {
        enable: true,
        mode: 'out', // "out" or "bounce"
        density_auto: false,
        density_area: 800 // nb_particles = particles.nb * (canvas width *  canvas height / 1000) / density_area
      }
    }
  },
  /* Retina Display Support */
  retina_detect: true
});

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:

	<script src="particles.js"></script>
	<script src="particulas.js"></script>
</body>
</html>

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;

	body {
		background:url(bg.jpg), #000;
		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

35 respuestas a “Como hacer efecto partículas en movimiento con Javascript”

  1. Mark dice:

    wow ppara cuando el otro video?

  2. Flx Company dice:

    Excelentes tutoriales muchas gracias por los aportes :!

  3. Maicol dice:

    Carlos Arturo No Me Salen Las Particulas Ayudame!!

  4. Maria Emi dice:

    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?

  5. Fernando dice:

    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!

  6. Marlon Ramirez dice:

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

  7. Gabriel Navarro dice:

    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.

  8. Sharon Guerrero dice:

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

  9. Davian Bermudez dice:

    Amigo como puedo hacer que las particulas queden de fondo

  10. Otoniel dice:

    Hola falcon Tengo problemas con las particulas Nesecito tu Ayuda

  11. ca dice:

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

    es urgente¡¡¡

    gracias

    • Javi A Notes dice:

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

  12. Matias Aldazabal dice:

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

  13. yarrendel . dice:

    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 dice:

      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»
      }
      }

      );

  14. pipohot01 dice:

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

    muchas gracias

  15. Josue Arellano dice:

    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

  16. Daniel Sánchez dice:

    ¿en donde puedo encontrar para ponerlo como fondo?

  17. jorge paz dice:

    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

  18. Zmplmnt Dey Dx dice:

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


Aprende con nuestros cursos

React y Firebase: El Curso Completo, Práctico y desde Cero

React y Firebase: Curso Completo, Práctico y desde Cero

En este curso aprenderás React desde lo mas básico y paso por paso hasta un nivel avanzado donde podrás crear sitios y aplicaciones web reales.

Inicia el curso

Diseño Web Profesional El Curso Completo, Practico y desde 0

Bienvenido al Curso de Diseño Web, el curso en el que aprenderás paso por paso y desde cero todo lo que necesitas para convertirte en un diseñador web.

Inicia el curso

Bootstrap 5: El Curso Completo, Práctico y Desde Cero

Aprende Bootstrap 4, el framework de diseño web mas importante del mundo.

Inicia el curso
PHP y MYSQL: El Curso Completo, Practico y Desde Cero

PHP y MYSQL: El Curso Completo, Practico y Desde Cero

Aprende a crear cualquier Aplicacion y Sitio Web!. Aprende PHP y MySQL.

Inicia el curso