Instalar js-particles en la homepage

Hi Carlos,

Can you specify which part of the page you want to make it run on?

Also, can you share the initialization code you're using?

It's one thing to hook in the script library but you still need to do the init script.

The init script looks something like:

particlesJS('UNIQUE_ID_HERE',
     ...
);

This is where you assign which element you wan the particlesJS script to run on. If we know which part of the site you want to run particlesJS and saw your init code, we'll have an idea of what edits you can do with it.

Let us know.

Buenas Elvin,

El código que estoy empleando es el siguiente:

particlesJS('particles',

{
  "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": 3,
      "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": 4,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "repulse"
      },
      "onclick": {
        "enable": false,
        "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,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
}
);

El lugar donde quiero que aparezca js-particles es el siguiente:

En la home, al igual que lo hice en https://safegest.com

Un saludo

the script doesn't seem to be finding the element as it returns this error.
https://share.getcloudapp.com/qGuJN0n2

I see you're using a plugin for this. I'm not exactly sure how the plugin does the init script so you may have to ask them about it.

Tip: If you're familiar with adding libraries to your site, consider skipping the plugin and just do it yourself using the official github page as reference - https://github.com/VincentGarreau/particles.js/

Eso es porque no he asignado el complemento al ID de la seccion donde lo quiero colocar:

Me gustaria que el js-particles se vea de fondo en esa seccion, es decir toda la cabezera, pero no se identificar el ID de la seccion

Me gustaria que quedara igual que en https://safegest.com, pero elementor si te permite colocar el ID.

Pero en generatepress, no se donde colocar ese ID para que aparezca JS-PARTICLES en esta zona de mi web

Lo estoy haciendo con el plugin siguiente:

Si pudieran ayudarme se lo agradeceria.

Tambien he visto que se puede hacer sin plugin, pero me pierdo en los pasos, si alguien pudiera indicarme en los pasos a seguir para hacerlo sin plugin estoy dispuesto a no usar el plugin.

La pagina donde quiero colocar js-particles es: https://prueba.safegest.com/

Un saludo

Hi there,

use the Block editor on that page or a Block Element for that section.
Add a GenerateBlocks Container Blocks has an ID ( HTML Anchor ) Field in the Advanced settings.

Buenas,

he conseguido algo.

He puesto el codigo html:

<link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="particles-js"></div>
    <script type="text/javascript" src="https://contrapelo.org/wp-content/themes/generatepress_child/js/particles.js"></script>
    <script type="text/javascript" src="https://contrapelo.org/wp-content/themes/generatepress_child/js/demo/js/app.js"></script>	
</body>
</html>	

Despues el css:

/* particles*/
body {
	margin: 0;
	padding: 0;
	height: 100vh;
}
#particles-js {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    left: 0;
}
body {
-webkit-animation: colorchange 30s;
    /* Chrome and Safari */
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-play-state: running;
}

@keyframes colorchange {
    0% {
        background: #1e73be;
    }

    25% {
        background: #7B5C75;
    }

    50% {
        background: #E85140;
    }

    75% {
        background: #27AE60;
    }

    100% {
        background: #1e73be;
    }
}

@-webkit-keyframes colorchange

/* Safari and Chrome - necessary duplicate */
    {
    0% {
        background: #1e73be;
    }

    25% {
        background: #7B5C75;
    }

    50% {
        background: #E85140;
    }

    75% {
        background: #27AE60;
    }

    100% {
        background: #1e73be;
    }
}

Y metido el archivo particles.js y app.js en sus carpetas y he conseguido lo siguiente:

https://prueba.safegest.com/particles/

Ahora solo me queda meter el codigo en la siguiente pagina:

https://www.dropbox.com/s/pazl8v1p1jozny7/particles.png?dl=0

He visto que como comentas David tiene en opciones avanzada un lugar donde colocar el anchor HTML, he probado varios anchor pero no hace nada la pagina, no si es lo estoy haciendo bien, ya me falta poco pero no se dar el ultimo paso.

Es la home de https://prueba.safegest.com

Pero no se como hacerlo es lo que me falta.....

Un saludo

You will need to modify like so:

1. Select your Container Block, and in the Advanced > Additional CSS Class(es) add: particle-background
2. Inside the Container Block after your content, add a HTML Block with the following:

<div id="particles-js"></div>

3. In a Hook Element, selecting the wp_head hook add your script tags ie.

<script type="text/javascript" src="https://contrapelo.org/wp-content/themes/generatepress_child/js/particles.js"></script>
<script type="text/javascript" src="https://contrapelo.org/wp-content/themes/generatepress_child/js/demo/js/app.js"></script>

4. Now add this CSS:

.gb-container.particle-background {
    position: relative;
}

#particles-js {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
}

This CSS should position the particles-js element over the Container Block.

It will require some adjustment of z-index to make it appear behind the content. But first try the above to see if it appears.

Buenas David,

Hice lo que me comentaste, pero algo ha fallado porque no se ven las js-particles dentro del contenedor.

1º.- añadi el html y el css

2.- añadi el hook

3.- añadi el CSS

.gb-container.particle-background {
position: relative;
}

#particles-js {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
}

No se si hay algo que he hecho mal. ¿Que podria ser?

Un saludo

Can you change the Hook to wp_footer ?

Siiiiiiiiiiii!!!!! ahora si David, muchas gracias por tu ayuda, era muy importante para mi ¡, estuve horas y horas tratando de saber hacerlo.... Gracias!!! ;)

I am glad we could be of help!!!

Buenas David,

Tengo una duda, estoy haciendo una seri de pruebas...

En mi web https://definitivo.safegest.com js-particles NO ocupa todo el ancho de la pantalla

En mi otra web https://prueba.safegest.com js-particles SI ocupa todo el ancho de la pantalla y he seguido los mismos pasos.

Como puedo hacer para que https://definitivo.safegest.com ocupe todo el ancho del contenedor.

Me gustaria que js-particles ocupara todo el ancho de pantalla en esta web https://definitivo.safegest.com y sea igual que https://prueba.safegest.com

Un saludo

Tricky one.... due to relative position requirements of your current layout/
One option:

1. create a new Container Block, set it to full width and full width inner and remove its Padding, and give it the particle-background class. Remove that class from the existing container.

2. inside the new container first add your <div id="particles-js"> HTML.

3. then move your exiting hero container content inside the new container, so it comes after the particles-js.

We should then be able to position the particles-js to fill this new container without affecting the content inside it,

Hola David, hice lo que me comentaste y funciono ;)

Solo tengo un problema ahora, el botón de abajo no se puede hacer click porque creo la capa de particles esta por encima, como podria solucionar esto?

https://definitivo.safegest.com

Un saludo