Oxygenados La comunidad hispana
Recoda White Full Logo
Patrocinador
post oxygen builder

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
Puntuación
Suscribir
Notificar de
guest
2 Comentarios
Viejos
Nuevos Más votados
Comentarios en línea
Ver todos los comentarios
Sixto
4 meses hace

Me puedes ayudar a incertarlo no puedo no hay manera que me salga gracias chicos.

Modificar Cabecera Admin

Supongamos que tienes una barra superior sobrecargada y que quieres eliminar alguno o algunos de los elementos que se muestran por el motivo que sea. Una barra parecida a la que mostramos en la imagen siguiente.

Leer más
Tab Gallery - JavaScript

Cuando creamos tab-galleries se nos puede presentar el problema de que tengamos que incluir mas de uno de estos elementos y por lo tanto tengamos que duplicar el código.
Mediante el código que presentamos podemos incluir en una misma página o entrada tantos elementos de estos como queramos sin tener que cambiar mas que las imágenes y los textos correspondientes.

Leer más
Cambiar entre elementos con un click

Como cambiar entre elementos con un click de ratón. Sin importar el número de elementos.

Leer más