0

我正在尝试使用 fullpage.js 库构建一个单页网站，效果很好！我还想将particle.js 库中的粒子效果添加到我网站的第一部分。

无论我尝试什么，似乎粒子都没有出现，我不确定问题可能是什么，感谢任何帮助！我的代码如下：

HTML：

<div class="section" id="particles-js"></div>

JS：

particlesJS.load('particles-js', '/assets/particles.json', function() {
    console.log('callback - particles.js config loaded');
});

CSS：

#particles-js {
  background: cornflowerblue;
}

我的particles.json 文件是从这里随库提供的默认文件。

我的 JS 代码位于名为 init_libraries.js 的文件中，该文件被添加到我的 HTML 页面中，如下所示：

<script src="/javascript/bootstrap.min.js"></script> 
<script src="/javascript/jquery.fullPage.min.js"></script> 
<script src="/javascript/particles.min.js"></script> 
<script src="/javascript/init_libraries.js"></script>

当我启动我的网站时，我看到“回调 -particles.js 配置加载”消息，因此库和配置文件似乎加载正常，但我仍然在我的网站上看不到任何粒子。有任何想法吗？

编辑：

过了一会儿才弄清楚这个，我不得不像这样更改我的 HTML：

<div id="particles-js">
     <canvas class="particles-js-canvas-el" style="width: 100%; height: 100%;"></canvas>
</div>

我还必须在 CSS 中添加以下内容，以便粒子位于我的文本和按钮后面：

canvas {
    position: absolute; 
    top: 0; 
    z-index: 1;
}

.container a {
    position: relative;
    z-index: 9999;
}

.container h1 {
    position: relative;
    z-index: 9999;
}

现在效果很好！所有库 js 文件都位于正确的位置。

4

1 回答 1

0

我猜您的资产不在您的 javascript 文件夹中。检查您的“particles.json”的相对路径是否正确。

particlesJS.load('particles-js', '../assets/particles.json', function() {
   console.log('callback - particles.js config loaded');
});

抱歉不能评论：/

于 2017-09-11T00:32:20.717 回答