Блог

Главная - Вопросы по программированию - Проблема с particles.js

Проблема с particles.js

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я пытаюсь использовать particles.js библиотека в качестве фона, но частицы продолжают отображаться под элементами. Я пытался использовать Z-index, но это не сработало, также искал в Stack-overflow, Google и YouTube, но ничего полезного не получил. и я использовал почти все в CSS, но также не получил ничего полезного.

Это мой код:

  const particlesJSON = {
    "particles": {
        "number": {
            "value": 40,
            "density": {
                "enable": true,
                "value_area": 500
            }
        },
        "color": {
            "value": "#ff9800"
        },
        "shape": {
            "type": "polygon",
            "stroke": {
                "width": 2,
                "color": "#ff9800"
            },
            "polygon": {
                "nb_sides": 6
            },
            "image": {
                "src": "img/github.svg",
                "width": 100,
                "height": 100
            }
        },
        "opacity": {
            "value": 0.5,
            "random": true
        },
        "size": {
            "value": 10,
            "random": true
        },
        "line_linked": {
            "enable": false,
            "distance": 200,
            "color": "#ff5722",
            "opacity": 0.3,
            "width": 2
        },
        "move": {
            "enable": true,
            "speed": 5,
            "direction": "bottom",
            "random": true,
            "straight": true,
            "out_mode": "out",
            "bounce": false,
            "attract": {
                "enable": false,
                "rotateX": 600,
                "rotateY": 1200
            }
        }
    },
    "interactivity": {
        "detect_on": "canvas",
        "events": {
            "onhover": {
                "enable": false,
                "mode": [
                    "grab",
                    "bubble"
                ]
            },
            "onclick": {
                "enable": true,
                "mode": "push"
            },
            "resize": true
        },
        "modes": {
            "grab": {
                "distance": 400,
                "line_linked": {
                    "opacity": 0.7
                }
            },
            "bubble": {
                "distance": 600,
                "size": 12,
                "duration": 1,
                "opacity": 0.8,
                "speed": 2
            },
            "repulse": {
                "distance": 400,
                "duration": 0.4
            },
            "push": {
                "particles_nb": 20
            },
            "remove": {
                "particles_nb": 10
            }
        }
    },
    "retina_detect": true
}

particlesJS("sec", particlesJSON)   
 *{
    margin: 0;
    padding: 0;
    height: 100vh;
}

.container{
    max-width: 100%;
    padding-left: 70px;
    padding-right: 70px;
    
}
.card{
    background-color: rgb(255, 255, 255)!important;
    overflow: hidden;
    border: medium none;
    border-radius: 6px;
    box-shadow: -1px 92px 99px -62px rgba(0,0,0,0.12), 0 25px 65px 0 rgba(0,0,0,0.08);
    height: 80%;
    text-align: center;
}
.testimonials-item{
    padding: 37px;
}
.card-info{
    padding-right: 10px;
    padding-left: 10px;
}
#text1{
    font-size: 23px;
    color: #f0c504c4;
    font-family: 'Nunito', sans-serif;
    margin-bottom: 0;
}
#text2{
    color: #7d8b9b;
    font-size: 15px;
}
.row{
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}
.row2{
    margin-top: 17px;
}
.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
.wow{
    margin-bottom: 30px;  
 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  <link rel=”stylesheet” href=”css/bootstrap-responsive.css”>
  <link rel="stylesheet" href="hello.css">
 
  <title>Particles</title>
</head>

<body>
  

  <section id="sec">

   

    <div class="container">
       <!-- code below for the cards -->
       <div class="row">
          <div class="col-md-4 wow " >
             <div class="card testimonials-item">
                <div>
                   <div class="card-content">
                      <div class="card-info">
                       <h6 id="text1">content?</h6>
                         <p id="text2">content content content content content content content content content content</p>
                      </div>
                   </div>
                </div>
             </div>
          </div>
          <div class="col-md-4 wow">
             <div class="card testimonials-item">
                <div>
                   <div class="card-content">
                      <div class="card-info">
                       <h6 id="text1">content</h6>
                         <p id="text2">content content content content content content content content content content</p>
                      </div>
                   </div>
                </div>
             </div>
          </div>
          <div class="col-md-4 wow" >
             <div class="card testimonials-item">
                <div>
                   <div class="card-content">
                      <div class="card-info">
                       <h6 id="text1">content</h6>
                         <p id="text2">content content content content content content content content content content</p>
                      </div>
                   </div>
                </div>
             </div>
          </div>
       </div>
       </div>
    </div>
    
 </section>
 


  <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
  <script src="json-particles.js"></script>


  <!-- THIS JavaScript code for Bootstrap -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3h66lZH81PoYlFhbGU 6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV rV" crossorigin="anonymous"></script>

</body>
</html>

Ответ №1:

Дайте вашему холсту фиксированное положение и поместите его наверх.

  const particlesJSON = {
    "particles": {
        "number": {
            "value": 40,
            "density": {
                "enable": true,
                "value_area": 500
            }
        },
        "color": {
            "value": "#ff9800"
        },
        "shape": {
            "type": "polygon",
            "stroke": {
                "width": 2,
                "color": "#ff9800"
            },
            "polygon": {
                "nb_sides": 6
            },
            "image": {
                "src": "img/github.svg",
                "width": 100,
                "height": 100
            }
        },
        "opacity": {
            "value": 0.5,
            "random": true
        },
        "size": {
            "value": 10,
            "random": true
        },
        "line_linked": {
            "enable": false,
            "distance": 200,
            "color": "#ff5722",
            "opacity": 0.3,
            "width": 2
        },
        "move": {
            "enable": true,
            "speed": 5,
            "direction": "bottom",
            "random": true,
            "straight": true,
            "out_mode": "out",
            "bounce": false,
            "attract": {
                "enable": false,
                "rotateX": 600,
                "rotateY": 1200
            }
        }
    },
    "interactivity": {
        "detect_on": "canvas",
        "events": {
            "onhover": {
                "enable": false,
                "mode": [
                    "grab",
                    "bubble"
                ]
            },
            "onclick": {
                "enable": true,
                "mode": "push"
            },
            "resize": true
        },
        "modes": {
            "grab": {
                "distance": 400,
                "line_linked": {
                    "opacity": 0.7
                }
            },
            "bubble": {
                "distance": 600,
                "size": 12,
                "duration": 1,
                "opacity": 0.8,
                "speed": 2
            },
            "repulse": {
                "distance": 400,
                "duration": 0.4
            },
            "push": {
                "particles_nb": 20
            },
            "remove": {
                "particles_nb": 10
            }
        }
    },
    "retina_detect": true
}

particlesJS("sec", particlesJSON)   
 *{
    margin: 0;
    padding: 0;
    height: 100vh;
}
canvas {
    position: fixed;
    top: 0;
}

.container{
    max-width: 100%;
    padding-left: 70px;
    padding-right: 70px;
    
}
.card{
    background-color: rgb(255, 255, 255)!important;
    overflow: hidden;
    border: medium none;
    border-radius: 6px;
    box-shadow: -1px 92px 99px -62px rgba(0,0,0,0.12), 0 25px 65px 0 rgba(0,0,0,0.08);
    height: 80%;
    text-align: center;
}
.testimonials-item{
    padding: 37px;
}
.card-info{
    padding-right: 10px;
    padding-left: 10px;
}
#text1{
    font-size: 23px;
    color: #f0c504c4;
    font-family: 'Nunito', sans-serif;
    margin-bottom: 0;
}
#text2{
    color: #7d8b9b;
    font-size: 15px;
}
.row{
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}
.row2{
    margin-top: 17px;
}
.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
.wow{
    margin-bottom: 30px;  
 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  <link rel=”stylesheet” href=”css/bootstrap-responsive.css”>
  <link rel="stylesheet" href="hello.css">
 
  <title>Particles</title>
</head>

<body>
  

  <section id="sec">

   

    <div class="container">
       <!-- code below for the cards -->
       <div class="row">
          <div class="col-md-4 wow " >
             <div class="card testimonials-item">
                <div>
                   <div class="card-content">
                      <div class="card-info">
                       <h6 id="text1">content?</h6>
                         <p id="text2">content content content content content content content content content content</p>
                      </div>
                   </div>
                </div>
             </div>
          </div>
          <div class="col-md-4 wow">
             <div class="card testimonials-item">
                <div>
                   <div class="card-content">
                      <div class="card-info">
                       <h6 id="text1">content</h6>
                         <p id="text2">content content content content content content content content content content</p>
                      </div>
                   </div>
                </div>
             </div>
          </div>
          <div class="col-md-4 wow" >
             <div class="card testimonials-item">
                <div>
                   <div class="card-content">
                      <div class="card-info">
                       <h6 id="text1">content</h6>
                         <p id="text2">content content content content content content content content content content</p>
                      </div>
                   </div>
                </div>
             </div>
          </div>
       </div>
       </div>
    </div>
    
 </section>
 


  <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
  <script src="json-particles.js"></script>


  <!-- THIS JavaScript code for Bootstrap -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3h66lZH81PoYlFhbGU 6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV rV" crossorigin="anonymous"></script>

</body>
</html>

Комментарии:

1. Это не работает, я внес некоторые изменения по вашему предложению (я просто вставил z-index=1 контейнер), чтобы создать частицы за содержимым, и это сработало, но эффекты мыши исчезли,