Question

我正在尝试使用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文件是库提供的默认文件，来自here。

我的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>

当我启动我的网站时，我看到“callback - particles.js config loaded”消息，因此库和配置文件似乎可以正常加载，但我仍然看不到我网站上的粒子。有什么想法吗？

编辑：

过了一会儿就把这个问题搞清楚了，我不得不像这样改变我的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文件都在正确的位置。

Answer 1

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

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

抱歉无法评论：/

使用particles.js和fullpage.js的问题？

编辑：

1 个答案: