Como hacer efecto partículas en movimiento con Javascript

0

0

Share on Pinterest

0

0

Comparte con tus amigos

Tu nombre

Tu e-mail

E-mail del destinatario

Enter a Message
Leí este artículo y me pareció muy interesante, pensé que te podría gustar. El artículo se llama Como hacer efecto partículas en movimiento con Javascript te comparto el link https://www.falconmasters.com/web-design/efecto-particulas-javascript/.

Captcha

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…

0

0

Share on Pinterest

0

0

Comparte con tus amigos

Tu nombre

Tu e-mail

E-mail del destinatario

Enter a Message
Leí este artículo y me pareció muy interesante, pensé que te podría gustar. El artículo se llama Como hacer efecto partículas en movimiento con Javascript te comparto el link https://www.falconmasters.com/web-design/efecto-particulas-javascript/.

Captcha

Enviar