Oxygenados La comunidad hispana
post oxygen builder
Logo Oxygenados

Particles en JS

¿Cómo puedes hacerlo?

Nuevo tutorial donde aprendemos a insertar en nuestra página este maravilloso y sorprendente efecto visual. Y como siempre con unos pocos pasos, un poco de copy&paste y sin necesidad de saber programar.

Vamos, como siempre, paso por paso
  1. Creamos una nueva sección.
  2. Dentro de esta sección metemos un Code Block (Ver imagen orientativa abajo)
Pariculas en JS Oxygen Builder en Español
  1. Al Code Block tenemos que cambiarle el id para que quede como particles-js .
  2. Copiamos este código:

    <script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js">

  3. En la sección PHP/HTML pegamos el código copiado.(Ver imagen orientativa abajo) Click en al imagen para ampliar
Particulas Panel Izquierdo
  1. Nos vamos a esta página y allí configuramos a nuestro gusto las propiedades de nuestro particles.js, hay mucha información en la web de como configurar esto, en youtube por ejemplo siguiendo este enlace.
  2. Una vez que lo tengas configurado a tu gusto, le das al botón CodePen que tienes en la esquina superior derecha.(Ver imagen abajo) Click en al imagen para ampliar
Partículas Codepen
  1. Ya en CodePen, iremos a la ventana de CSS le damos en la flechita que apunta hacia abajo en la parte superior derecha de esta pequeña ventana de CSS, al lado del engranaje, y en el desplegable pinchamos en Format CSS y copiamos lo que hay entre las etiquetas
    /* ---- particles.js container ---- */

    El código css va en el medio

    /* ---- stats.js ---- */
  2. Este código lo pegaremos en apartado para CSS en el Code Block,  amarilla de la imagen de abajo.
  3. Y ya dentro del apartado CSS pegamos el código que de CodePen antes habíamos copiado.
Particles con CSS
  1. Ahora volvemos a CodePen y nos dirigimos a la sección de JS en la esquina superior derecha y al igual que hicimos en la parte de CSS damos click en la flecha hacia abajo y hacemos click en Format JavaScript
Partículas Code JS
  1. Aquí copiamos todo el código desde la parte superior hasta donde pone var count_particles, stats, update; sin incluir esto último, es decir, nuestra parte copiada empezará con particlesJS("particles-js", { y terminará con });
  2. Al igual que como explicamos que había que tener cuidado al seleccionar el apartado de CSS con el JavaScript tenemos que hacer lo mismo y seleccionar pinchando en el icono correspondiente tal y como muestra la imagen de abajo.
Partículas Panel JS
  1. Ya asegurándonos que estamos en la sección de JavaScript adecuada ahí pegamos el código que hemos copiado en el paso anterior y con elllo habremos finalizado todos los pasos.
* Fijándonos un poco, nos damos cuenta de que la parte de CSS que hemos copiado y pegado en los pasos del 8 al 10 puede ser modificado para conseguir unos ajustes mas acordes a nuestras necesidades, el código JSON, que al fin y al cabo es lo que hemos metido en la parte de JavaScript, tambien puede ser modificado para conseguir otros efectos, para ello se pueden seguir las instrucciones que hay en GitHub de Vicent Garreau.
0 0 votos
Article Rating
Suscribir
Notificar de
guest
0 Comments
Comentarios en línea
Ver todos los comentarios

OTROS TIPS

Burbuja que sigue al cursor

Un efecto de seguimiento del cursor con solo código.

Leer más
Botón para copiar

Con un poco de código podemos hacer el típico botón que nos permite pasar al porta-papeles o lo que es lo mismo, copiar un texto; este texto puede estar oculto o visible y podrá ser código o texto plano.

Leer más
Año Copyright dinámico

Hacer que el año del copyright, generalmente colocado en el footer, se actualize de manera automática. Mostramos tres maneras de hacerlo.

Leer más
LISTADO TIPS