-
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.
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/Qb7MHGkThank 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!
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.
ThanksThank 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
}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; }
You must be logged in to reply to this topic.
