particle js onclick event

Question

I am using particle js to create a website. I am stuck with something.
In Particle.js is it possible to open a link or trigger a javascript function while clicked on the dots. Went through the documentation but couldn't find a way to implement that. So, how do I implement.

here is my code:

html code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Particles button</title>
    <script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1 id="target">Venom</h1>
    <div id="particles-js"></div>
    <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
    <script type="text/javascript" src="pinkmoon.js"></script>
</body>

</html>

particles.json file

{
    "particles": {
        "number": {
            "value": 100,
            "density": {
                "enable": false,
                "value_area": 100
            }
        },
        "color": {
            "value": "#ee0000"
        },
        "shape": {
            "type": "circle",
            "stroke": {
                "width": 0.3,
                "color": "#0a0a0a"
            },
            "polygon": {
                "nb_sides": 1
            },
            "image": {
                "src": "dv.png"
            }
        },
        "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": 80,
                "size_min": 0.1,
                "sync": false
            }
        },
        "line_linked": {
            "enable": true,
            "distance": 300,
            "color": "#000000",
            "opacity": 0.4,
            "width": 2
        },
        "move": {
            "enable": true,
            "speed": 2,
            "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": "bubble"
            },
            "onclick": {
                "enable": true,
                "mode": "push" //want to trigger a function here
            },
            "resize": true
        },
        "modes": {
            "grab": {
                "distance": 80,
                "line_linked": {
                    "opacity": 50
                }
            },
            "bubble": {
                "distance": 100,
                "size": 10,
                "duration": 2,
                "opacity": 0.8,
                "speed": 3
            },
            "repulse": {
                "distance": 100,
                "duration": 0.4
            },
            "push": {
                "particles_nb": 10,
                "size": 40
            },
            "remove": {
                "particles_nb": 2
            }
        }
    },
    "retina_detect": true
}

Thanks a lot.

score 0 · Answer 1 · answered Jun 23 '18 at 09:49

This can be achieved by manupulating the particles.js script. As "push" mode is used to click event here, in the script. The following function is triggered while clicked on the particles.

 pJS.fn.modes.pushParticles = function(nb, pos){
   // code goes here
  };

particle js onclick event

1 Answers1