Jump to content

Problem to add a particles.js on image in overlay

Recommended Posts

Hello Guys,

I have a problem with particles.js, it isn't possible to add a code in a block or even overlay on the image with header code injection.

The code is, I had already changed URL slug with the name of the correct image block.

Even if I try to add a direct code block the effects don't appear

Can someone help me? 

<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    particlesJS("url-slug", particlesJSConfig);
    setTimeout(function() { window.dispatchEvent(new Event('resize')); }, 100);
  });
</script>
<style>
  .particles-js-canvas-el {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
</style>

<script>
  var particlesJSConfig =
      {
        "particles": {
          "number": {
            "value": 250,
            "density": {
              "enable": false,
              "value_area": 800
            }
          },
          "color": {
            "value": "#5b86e5"
          },
          "shape": {
            "type": "edge",
            "stroke": {
              "width": 0,
              "color": "#000"
            },
            "polygon": {
              "nb_sides": 6
            },
            "image": {
              "src": "img/github.svg",
              "width": 100,
              "height": 100
            }
          },
          "opacity": {
            "value": 1,
            "random": true,
            "anim": {
              "enable": true,
              "speed": 0.5,
              "opacity_min": 0.1,
              "sync": false
            }
          },
          "size": {
            "value": 1,
            "random": true,
            "anim": {
              "enable": true,
              "speed": 10,
              "size_min": 50,
              "sync": false
            }
          },
          "line_linked": {
            "enable": false,
            "distance": 200,
            "color": "#ffffff",
            "opacity": 1,
            "width": 2
          },
          "move": {
            "enable": true,
            "speed": 0.75,
            "direction": "top-left",
            "random": true,
            "straight": false,
            "out_mode": "out",
            "bounce": false,
            "attract": {
              "enable": false,
              "rotateX": 1250,
              "rotateY": 2600
            }
          }
        },
        "interactivity": {
          "detect_on": "window",
          "events": {
            "onhover": {
              "enable": true,
              "mode": "bubble"
            },
            "onclick": {
              "enable": false,
              "mode": "push"
            },
            "resize": true
          },
          "modes": {
            "grab": {
              "distance": 300,
              "line_linked": {
                "opacity": 1
              }
            },
            "bubble": {
              "distance": 200,
              "size": 1,
              "duration": 2,
              "opacity": 3,
              "speed": 2
            },
            "repulse": {
              "distance": 50,
              "duration": 0.4
            },
            "push": {
              "particles_nb": 4
            },
            "remove": {
              "particles_nb": 2
            }
          }
        },
        "retina_detect": true
      }
</script>

 

Link to comment
  • Replies 0
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.