Adding tsParticles as background

Question

I'm trying to use tsParticles as a background to a login page but the mouse event doesn't work when I'm on the login div.

How can I make it work?

Here's my configuration

tsParticles.load('tsparticles', {
  background: {
    color: '#000000'
  },
  particles: {
    color: {
      value: '#CF5C36'
    },
    opacity: {
        value: 0.5
    },
    lineLinked: {
      color: {
        value: '#EFC88B'
      },
      consent: true
    }
  },
  interactivity: {
    events: {
      onHover: {
        mode: ['grab', 'bubble'],
        enable: true
      }
    },
    modes: {
      grab: {
        distance: 200
      },
      bubble: {
        size: 10
      }
    }
  },
  preset: 'basic'
});

Here's a sample fiddle of the issue: https://jsfiddle.net/jmfhk0xb/

score 3 · Accepted Answer · answered Apr 04 '20 at 10:35

In the interactivity section, you need to add detect_on: 'window'.

interactivity: {
    detect_on: 'window',
    events: {
        onHover: {
            mode: ['grab', 'bubble'],
            enable: true
        }
    },
    modes: {
        grab: {
            distance: 200
        },
        bubble: {
            size: 10
        }
    }
},

Adding tsParticles as background

1 Answers1