Particles.js不允许在文本周围产生

我终于有了particle.js作为背景工作。Particles.js不允许在文本周围产生

但是，当你点击文本上方或下方（高度方向）时，你只能产生星星，你不能在文本所在的位置产生它们（或者与容器相同的行）。

有没有办法解决这个问题？

我的HTML：

<link href="https://fonts.googleapis.com/css?family=Roboto:100" rel="stylesheet"> 

<!-- particles.js container --> 
<div id="particles-js"></div> 
<!-- particles.js container --> 

<body> 
<div class="something"> 
    <h1> MY TITLE </h1> 
</div> 
</body> 

<!-- particles.js library --> 
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

我的CSS：

* { 
    margin: 0; 
    padding: 0; 
} 

p { margin: 1em auto;} 

canvas { 
    display: block; 
} 


#particles-js { 
width: 100%; 
    height: 100vh; 
    background: -webkit-linear-gradient(top, #000000 1%, #0c0c24 100%); 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: -50; 
} 

.something { 
    text-align: center; 
    margin: 0 auto; 
    margin-top: 200px; 
    font-family: 'Roboto', sans-serif; 
} 

.something h1 { 
    color: white; 
    font-size: 10em; 
}

我的JS：

particlesJS("particles-js", { 
    "particles": { 
    "number": { 
     "value": 160, 
     "density": { 
     "enable": true, 
     "value_area": 800 
     } 
    }, 
    "color": { 
     "value": "#ffffff" 
    }, 
    "shape": { 
     "type": "circle", 
     "stroke": { 
     "width": 0, 
     "color": "#000000" 
     }, 
     "polygon": { 
     "nb_sides": 5 
     }, 
     "image": { 
     "src": "img/github.svg", 
     "width": 100, 
     "height": 100 
     } 
    }, 
    "opacity": { 
     "value": 1, 
     "random": true, 
     "anim": { 
     "enable": true, 
     "speed": 1, 
     "opacity_min": 0, 
     "sync": false 
     } 
    }, 
    "size": { 
     "value": 3, 
     "random": true, 
     "anim": { 
     "enable": false, 
     "speed": 4, 
     "size_min": 0.3, 
     "sync": false 
     } 
    }, 
    "line_linked": { 
     "enable": false, 
     "distance": 150, 
     "color": "#ffffff", 
     "opacity": 0.4, 
     "width": 1 
    }, 
    "move": { 
     "enable": true, 
     "speed": 1, 
     "direction": "none", 
     "random": true, 
     "straight": false, 
     "out_mode": "out", 
     "bounce": false, 
     "attract": { 
     "enable": false, 
     "rotateX": 600, 
     "rotateY": 600 
     } 
    } 
    }, 
    "interactivity": { 
    "detect_on": "canvas", 
    "events": { 
     "onhover": { 
     "enable": false, 
     "mode": "grab" 
     }, 
     "onclick": { 
     "enable": true, 
     "mode": "push" 
     }, 
     "resize": true 
    }, 
    "modes": { 
     "grab": { 
     "distance": 400, 
     "line_linked": { 
      "opacity": 1 
     } 
     }, 
     "bubble": { 
     "distance": 250, 
     "size": 0, 
     "duration": 2, 
     "opacity": 0, 
     "speed": 3 
     }, 
     "repulse": { 
     "distance": 400, 
     "duration": 0.4 
     }, 
     "push": { 
     "particles_nb": 4 
     }, 
     "remove": { 
     "particles_nb": 2 
     } 
    } 
    }, 
    "retina_detect": true 
});

来源

2016-12-03 Milan Maru

这里有一个的jsfiddle。 https://jsfiddle.net/nhtnmpx0/ –

这里是修复。

您需要添加对window互动作为docs提及或定义自己的canvas，使其工作

这里是工作fiddle

"interactivity": { 
    "detect_on": "window", 
    "events": { 
     "onhover": { 
     "enable": false, 
     "mode": "grab" 
     },

来源

2016-12-03 05:59:13

非常感谢！这很好。 –

Particles.js不允许在文本周围产生

回答

相关问题