添加 tsParticles 作为背景

Question

我正在尝试使用 tsParticles 作为登录页面的背景，但在登录时鼠标事件不起作用 div。

我怎样才能让它发挥作用？

这是我的配置

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'
});

这是问题的示例 fiddle：https://jsfiddle.net/jmfhk0xb/

Answer 1

在interactivity部分，您需要添加detect_on: 'window'。

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

添加 tsParticles 作为背景

Adding tsParticles as background

html

javascript

animation

css-animations

particles.js