Particles en JS - Oxygenados La comunidad
Oxygenados La comunidad hispana
Recoda White Full Logo
Patrocinador
Menu
post oxygen builder
img-4

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
2 años hace

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

img-16
Añadir lightbox "Facilmente"

El añadir lightbox con sus efectos visuales parece una tarea difícil y que requiere el uso de un nuevo plugin, pero nada más lejos de la realidad, con Oxygen lo tenemos muy fácil, realmente asombrosamente fácil con dos líneas de código HTML y pocas más de código JavaScript, aquí mostramos como hacerlo.

Leer más
img-17
Imagen de Fondo Archivo de Categorías

Vamos a tratar de como añadir un encabezado con la imagen predeterminada para el archivo de categorías, cada categoría tendrá su imagen predeterminada.
Para esto solo se necesita de un plugin gratuito, aunque también se puede hacer con otros como por ejemplo el HappyFiles.

Leer más
img-18
Botón de Todos los Templates

Se echa de menos un botón que estando en la sección "Edit Template" nos lleve directamente a la página de Templates que es donde se muestra todo el listado de plantillas de Oxygen, parece que alguien se ha olvidado de este detalle que debería estar implementado nativamente y a veces hasta fastidia un poco tener que cargar dos páginas para llegar ahí estando en la sección de edición de template.

Leer más