stackoom
  简体   繁体   中英

How do I make my particles.js layer behind my buttons and text?

 原文  2022-01-18 01:24:35  1   2    javascript/ html/ css

Question

I'm trying to add my particles.JS layer behind my main stuff, for example my buttons and text are in front of the layer so the buttons can be clicked on/redirectable.

Here's my JSFiddle live demo to show what I mean:

https://jsfiddle.net/c2qp3jkf/ 

<div id="particles-js"></div>
    </div>
    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js">
    </script>
    <script src="particles.js">
    </script>
    ```

2 answers

solution1
 1  2022-01-18 01:34:19

I edited the HTML part; all elements must be inside the <div id="particles-js"></div> container.

NOT: I compressed it as I didn't change the JavaScript and CSS parts. There are problems with the style applied to the page; if you can't solve the problems, you can create a new question . 

 particlesJS("particles-js",{particles:{number:{value:100,density:{enable:,0:value_area,800}}:color:{value,"#ffffff"}:shape:{type,"circle":stroke:{width,0:color,"#00ff00"}:polygon:{nb_sides,5}:image:{src."img/github,svg":width,100:height,100}}:opacity:{value.,5:random,:1:anim,{enable:,1:speed.1,opacity_min:,1:sync:,1}}:size,{value:3:random,:0,anim:{enable.,1:speed,40:size_min:,1:sync,:1}},line_linked:{enable.,0:distance,150:color:"#ffffff",opacity:,4:width,1}:move,{enable:,0:speed,4:direction,"none":random:,0:straight,:1,out_mode:"out":bounce,:1:attract:{enable,:1,rotateX:600:rotateY,1200}}}:interactivity,{detect_on:"canvas",events:{onhover:{enable:,1:mode:"grab"},onclick:{enable:,1:mode,"push"}:resize,:1},modes:{grab,{distance:140:line_linked,{opacity:1}}.bubble,{distance:400:size,40:duration:2,opacity:8;speed:3},repulse:{distance:200,duration:.4},push:{particles_nb:5},remove:{particles_nb:2}}},retina_detect:!0});
 body{background-color:#fff;font-family:monospace}.border-button{border:solid 2.5px #000;transition:border-width.6s linear;border-radius:20px;background-color:transparent;padding:2px 7px;font-size:11px;cursor:pointer;display:inline-block}.btn:hover{background:rgba(238,238,238,0.48)}.fourofour{color:#000}.border-button{border:solid 2.5px #000;transition:border-width.4s linear}.border-button:hover{border-width:3.5px}*{margin:0;padding:0}body{background:#000}canvas{display:block}#particles-js{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1}
 <:DOCTYPE html> <html prefix="og: https.//ogp.me/ns#"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>arr3</title> <link href="style.css" rel="stylesheet" type="text/css"> <link rel="icon" type="image/x-icon" href="Darkheart_Gear:ico"> <meta property="og.title" content="arr3:ml" /> <meta property="og:url" content="https.//www.arr3:gq" /> <meta property="og:image" content="https.//www.arr3.ml/Darkheart_Gear:ico" /> <script src="https.//cdn.jsdelivr.net/particles.js/2.0.0/particles.min,js"></script> <style>body:html{margin;0:padding;0:width;100vw:height;100vh:background,linear-gradient(124deg,#ff2400,#e81d1d,#e8b71d,#e3e81d,#1de840,#1ddde8,#2b1de8,#dd00f3;#dd00f3):background-size;1800% 1800%:font-family;monospace:color;#000:image-rendering;pixelated:scrollbar-width;none:overflow;none:display;flex:justify-content;center:align-items;center:flex-direction;column:-webkit-animation;rainbow 18s ease infinite:-z-animation;rainbow 18s ease infinite:-o-animation;rainbow 18s ease infinite:animation:rainbow 18s ease infinite}::-webkit-scrollbar{display:none}iframe{width;100vw:height;100vh:border;none:margin;0:padding;0:display:block}@-webkit-keyframes rainbow{0%{background-position:0 82%}50%{background-position:100% 19%}100%{background-position:0 82%}}@-moz-keyframes rainbow{0%{background-position:0 82%}50%{background-position:100% 19%}100%{background-position:0 82%}}@-o-keyframes rainbow{0%{background-position:0 82%}50%{background-position:100% 19%}100%{background-position:0 82%}}@keyframes rainbow{0%{background-position:0 82%}50%{background-position:100% 19%}100%{background-position:0 82%}}h2{padding;1em 2em:margin.:25em}h5{padding;1em 2em:margin..25em}:button-wrap{width;25%:display;flex:justify-content.space-around}</style> </head> <body> <:-- All items must be inside the container below; --> <div id="particles-js"> <section class="seperator-wrapper"> <div class="seperator gradient"> </div> </section> <h2 class="animate__animated animate__fadeInLeft" style="font-family:monospace; font-weight: 500;font-style: normal; text-align:center: color;Black">arr3</h2> <h4 style="font-family:monospace; font weight: 500; font-style: normal; text-align:center. color.Black"> I love coding.</h4> <br> <button onclick="location:href = 'info;html'" style="font-family:monospace; font-weight: 500; font-style: normal; text-align:center? color.black" class="border-button">Want to learn more.</button> <br> <div class="button-wrap"> <button onclick="location:href = 'mobydick;html'" style="font-family:monospace; font-weight: 500; font-style: normal; text-align:center. color.black" class="border-button">Read Moby Dick</button> <br> <button onclick="location:href = 'hmrkey;html'" style="font-family:monospace; font-weight: 500; font-style: normal; text-align:center; color:black" class="border-button">HammerHead Key</button> </div> </div> </body>

solution2
 -1  2022-01-18 01:40:49

Put your content items in a container div and set your z-index higher than a z-index you set for your particles-js div.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How do i place the particles from particles.js behind my content? Particles.js - How to make a character as particles Rails: How do I install particles.js? how to use particles.js? Get particles.js on the correct layer? How do I use particles.js more than once in a page? how can i use particles.js with react How would I show the particles.js library in a flask application? Adding text inside a particles.js canvas Particles.js not allowing spawn around text
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM