JlParticle help

[tommy areias]

The particle JL particle here does it change the particle shapes? I’m looking to change the default circle, square,triangle,pacman to other shapes like the snow towards the bottom of that page.I see you can interact with the snow and the pattern above it. Is this the particle that can do that? Thank you for any help.

• This topic was modified 4 years, 3 months ago by tommy areias.

[Tony]

Hi Tommy,

For live customization, you can access this site https://vincentgarreau.com/particles.js/
Just config your particlejs layout and effect then download the config json file.
Next, go to particle configuration -> style -> custom then past your custom config date here https://imgur.com/Qb7MHGk

[tommy areias]

Thank you for the reply. I don’t see a Particle configuration. Where is that located? Thank you for pointing me to the site for particles. Should be fun to create new ones!

[Tony]

Hi Tommy,
Did you enable the particlejs atom before ? You need to enable the particlejs atom -> create new item with the section ID you want to apply the effect. That’s all.
Thanks

[tommy areias]

Thank you for the reply. I really appreciate it. I got it working! One small problem though. The dimensions are off. It’s cutting off part of the left side. HERE. If you scroll down a little bit you will see a pink background and the now particle and see how it’s cut off on the left. Thank you for the help! Here is the code I entered `{
“particles”: {
“number”: {
“value”: 400,
“density”: {
“enable”: true,
“value_area”: 800
}
},
“color”: {
“value”: “#fff”
},
“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”: true,
“anim”: {
“enable”: false,
“speed”: 1,
“opacity_min”: 0.1,
“sync”: false
}
},
“size”: {
“value”: 10,
“random”: true,
“anim”: {
“enable”: false,
“speed”: 40,
“size_min”: 0.1,
“sync”: false
}
},
“line_linked”: {
“enable”: false,
“distance”: 500,
“color”: “#ffffff”,
“opacity”: 0.4,
“width”: 2
},
“move”: {
“enable”: true,
“speed”: 6,
“direction”: “bottom”,
“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”: “bubble”
},
“onclick”: {
“enable”: true,
“mode”: “repulse”
},
“resize”: true
},
“modes”: {
“grab”: {
“distance”: 400,
“line_linked”: {
“opacity”: 0.5
}
},
“bubble”: {
“distance”: 400,
“size”: 4,
“duration”: 0.3,
“opacity”: 1,
“speed”: 3
},
“repulse”: {
“distance”: 200,
“duration”: 0.4
},
“push”: {
“particles_nb”: 4
},
“remove”: {
“particles_nb”: 2
}
}
},
“retina_detect”: true
}

[Tony]

Hi there,
I’m sorry for late response. The issue caused by your section padding left, so just use the css below to solve it.

canvas.particles-js-canvas-el {
    left: 0;
}

[tommy areias]

Awesome thank you so much!!

[Tony]

You’re welcome