Particles.js 畫布在位於其他 Bootstrap 輪播幻燈片位置時不起作用

Question

我正在使用 Bootstrap carousel 制作一個網站，其中應該包含一些動畫畫布。 我想在第二張幻燈片上使用 Particles.js 動畫，但它不起作用。 它只適用於第一張幻燈片，我不知道為什么。

有人可以幫助我嗎？

這是代碼：

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <style>
    #myCarousel {
      height: 500px
    }
    .carousel-inner > .item > img,
    .carousel-inner > .item > a > img {
      width: 70%;
      margin: auto;
    }
    canvas {
      position: relative;
      /*pointer-events:none;*/
      top: 0;
      left: 0
    }
    /* Particles Canvas*/
    #particles-js{
      height: 500px;
      width: 100%;
      background-color: #D0EDF5;
      background-image: url('');
      background-size: cover;
      background-position: 50% 50%;
      background-repeat: no-repeat;
    }
  </style>
</head>

<body>
  <div class="container">
    <br>
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>
      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <h1>First Slide</h1>
        </div>
        <div class="item">
          <div id="particles-js"></div>
        </div>
        <div class="item">
          <h1>Third Slide</h1>
        </div>
      </div>
      <!-- Left and right controls -->
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
  <script type="text/javascript">
    particlesJS('particles-js',

      {
        "particles": {
          "number": {
            "value": 60,
            "density": {
              "enable": true,
              "value_area": 800
            }
          },
          "color": {
            "value": "#0A8B80"
          },
          "shape": {
            "type": "circle",
            "stroke": {
              "width": 0,
              "color": "#000000"
            },
            "polygon": {
              "nb_sides": 5
            },
            "image": {
              "src": "img/github.svg",
              "width": 100,
              "height": 50
            }
          },
          "opacity": {
            "value": 0.5,
            "random": false,
            "anim": {
              "enable": false,
              "speed": 1,
              "opacity_min": 0.1,
              "sync": false
            }
          },
          "size": {
            "value": 20,
            "random": true,
            "anim": {
              "enable": false,
              "speed": 40,
              "size_min": 0.1,
              "sync": false
            }
          },
          "line_linked": {
            "enable": true,
            "distance": 150,
            "color": "#65BBC4",
            "opacity": 0.4,
            "width": 2
          },
          "move": {
            "enable": true,
            "speed": 6,
            "direction": "none",
            "random": false,
            "straight": false,
            "out_mode": "out",
            "attract": {
              "enable": false,
              "rotateX": 600,
              "rotateY": 1200
            }
          }
        },
        "interactivity": {
          "detect_on": "canvas",
          "events": {
            "onhover": {
              "enable": true,
              "mode": "repulse"
            },
            "onclick": {
              "enable": true,
              "mode": "push"
            },
            "resize": true
          },
          "modes": {
            "grab": {
              "distance": 400,
              "line_linked": {
                "opacity": 1
              }
            },
            "bubble": {
              "distance": 400,
              "size": 80,
              "duration": 2,
              "opacity": 8,
              "speed": 3
            },
            "repulse": {
              "distance": 200
            },
            "push": {
              "particles_nb": 4
            },
            "remove": {
              "particles_nb": 2
            }
          }
        },
        "retina_detect": true,
        "config_demo": {
          "hide_card": false,
          "background_color": "#D0EDF5",
          "background_image": "",
          "background_position": "50% 50%",
          "background_repeat": "no-repeat",
          "background_size": "cover"
        }
      }
    );
  </script>
</body>

</html>

此外，我注意到動畫在打開瀏覽器的開發者控制台時開始，如下例所示：

之前

之后

Answer 1

因為當particles.js 初始化時，它會讀取offsetHeight和offsetWidth屬性[1]，這些屬性描述了可見區域的大小[2]。 這可能是particles.js 的一個bug，但是你可以捕捉Bootstrap carousel 的slide 事件，然后初始化particles.js。

附加說明：

在滑動事件之后初始化particles.js 確保當它發生時，目標元素已經可見，這樣particles.js 就可以獲得有效的指標。

另一種解決方案是在每個幻燈片事件后觸發調整大小事件。 寬度和高度將重新計算[3]。 這也是為什么這個問題的作者可以通過打開開發者控制台來啟動動畫。

參考：

Particles.js 畫布在位於其他 Bootstrap 輪播幻燈片位置時不起作用

問題描述

1 個解決方案

解決方案1
1 已采納 2016-07-29 09:57:45

Particles.js 畫布在位於其他 Bootstrap 輪播幻燈片位置時不起作用

問題描述

1 個解決方案

解決方案1 1 已采納 2016-07-29 09:57:45

解決方案1
1 已采納 2016-07-29 09:57:45