Home Forums Template Support JlParticle help

Viewing 8 posts - 1 through 8 (of 8 total)
  • Avatar
    tommy areias
    Subscriber

    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.

    Avatar
    Tony
    Moderator

    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

    Avatar
    tommy areias
    Subscriber

    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!

    Avatar
    Tony
    Moderator

    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

    Avatar
    tommy areias
    Subscriber

    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
    }

    Avatar
    Tony
    Moderator

    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;
    }
    Avatar
    tommy areias
    Subscriber

    Awesome thank you so much!!

    Avatar
    Tony
    Moderator

    You’re welcome

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

JoomLead Gantry 5 Particles 2.1.0 released. New features, WCAG 2.0 accessibility and bug fixes See changelog
Sale 30% OFF Cyber Monday. Use the discount code CM2019 during checkout Buy Now