标签: particles.js

谁能解释如何为 angular 6 项目添加粒子 js 背景？我按照下面的链接学习了一些教程。但它对我不起作用。 https://github.com/VincentGarreau/particles.js/

谢谢你。

我有一个Angular应用程序,我想使用particles.js但是我不知道如何添加它并让它工作.

我把它添加到了.angular-cli.json

  "scripts": [
    "../node_modules/particles.js/particles.js"
  ],

我已将其导入我的组件

import * as  particlesJS from 'particles.js';

并试图使用它来初始化它

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

有人有这个工作吗？

我正在使用 Vincent Garreau 的 Particles.js（将链接但不能共享多个链接）在我网站的特定部分实现粒子效果背景。

<div id="particles-js" >

<section class="page-section features" >
<div class="container relative" >
     <div class=" font-alt hs-line-2 mb-30">
     <!-- Other relevant code for this section -->
     </div>
     </div> <!--end container div-->
     </section>
</div> <!-- End particles div>

CSS

#particles-js {
  background-color: #000;
  position: absolute;
  z-index: 50;
  width: 100%;
  height: 100%;
  top: 0;
}

.page-section {
  width: 100%;
  display: block;
  position: relative;
  overflow: hidden;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: …

我最近了解了 Particle.js 并想在我的 Reactjs 应用程序中使用它。

我使用下面提到的命令安装了它：-

npm install react-particles-js

并且安装成功。我在 node-modules 文件夹中检查了它，发现它已正确安装。

现在，来了 App.js

import React from 'react';
import Navigation from './components/Navigation'
import {BrowserRouter as Router,Route} from 'react-router-dom'
import * as ROUTES from './constants/routes'
import Landing from './components/Landing'
import Home from './components/Home'
import SignIn from './components/SignIn'
import SignUp from './components/SignUp'
import PasswordForget from './components/PasswordForget';
import Particles from 'react-particles-js';
function App() {
  return (
    <div className="App">
      <Router>
        <Particles></Particles>
         <Navigation />
         <Route exact path={ROUTES.HOME} component={Home} />
         <Route path={ROUTES.SIGN_IN} component={SignIn} />
         <Route path={ROUTES.SIGN_UP} …

我正在尝试使particles.js适应以下示例中的Vue.js组件：https ://codepen.io/MichaelVanDenBerg/pen/WpXGRm

但是，当使用下面的代码时，我在控制台中收到以下错误消息：

[Vue 警告]：挂载钩子错误：“TypeError: this.particles is not a function”

如何在下面的代码中修复它？

模板：

</template>
    <div>
        <div id="particles-js"></div>
    </div>
</template>

脚本：

<script>
import particles from 'particles.js'
export default {
    mounted() {
        this.initParticles()
    },
    methods: {
        initParticles () {
            particles("particles-js", {
                "particles": {
                    "number": {
                        "value": 80,
                        "density": {
                            "enable": true,
                            "value_area": 700
                        }
                    },
                    "color": {
                        "value": "#ffffff"
                    },
                    "shape": {
                        "type": "circle",
                        "stroke": {
                            "width": 0,
                            "color": "#000000"
                        },
                        "polygon": {
                            "nb_sides": 5
                        },
                    },
                    "opacity": {
                        "value": …

我有一个 React 组件，我想仅在该组件内部渲染粒子。我不想使用粒子作为整个页面的背景，但仅在该组件（div 元素）内使用，如dogecoin.com上所示。然而我在做这件事时遇到了严重的麻烦。我使用的代码如下：

const Block = () => {
const  particlesContainer= useRef(null);

return (
    <MiddleBlockSection>
       <Particles container= {particlesContainer} options={particlesOptions as ISourceOptions}/>
      <ParticlesContainer ref={particlesContainer} id="particles-js"></ParticlesContainer>
      <Slide direction="up" duration={500}>
      
        <Row justify="center" align="middle">
          <ContentWrapper>
            <Col lg={24} md={24} sm={24} xs={24}>
              <h6>{t(title)}</h6>
            </Col>
          </ContentWrapper>
        </Row>
      </Slide>
    </MiddleBlockSection>
  );}

所以我所做的基本上是为容器创建一个引用，并尝试将其用作 keywords.js 的引用。

发生这种情况的部分代码：

<Particles container= {particlesContainer}

我还尝试将组件放入其中，伪代码如下：

<ParticlesContainer> <Particles/> </ParticlesContainer> 

但这也行不通。粒子仍然在整个页面的背景上渲染，我希望它仅在容器组件内部渲染。

我使用的 npm 包是react-tsarticles。

我想使用 向我的 NextJS 应用程序添加粒子背景yarn add react-tsparticles。但是当我添加 tsarticles 时，我可以看到它添加了画布，但我看不到粒子。这是配置：-

const ParticlesConfig = {
  autoplay: true,
  fullScreen: {
    enable: true,
    zIndex: 1,
  },
  particles: {
    number: {
      value: 10,
      density: {
        enable: false,
        value_area: 800,
      },
    },
    color: {
      value: '#fff',
    },
    shape: {
      type: 'star',
      options: {
        sides: 5,
      },
    },
    opacity: {
      value: 0.8,
      random: false,
      anim: {
        enable: false,
        speed: 1,
        opacity_min: 0.1,
        sync: false,
      },
    },
    size: {
      value: 4,
      random: false,
      anim: {
        enable: false, …

我正在尝试将particles.js用作背景，但是无法将画布设置为全尺寸背景。

我尝试了类似问题的至少10种不同解决方案，但没有任何效果。画布始终作为具有宽高比的元素出现在屏幕上，但在调整大小时并不能覆盖整个画布。在成瘾中，它不会作为背景，而是作为身体的一部分，位于其余元素之上或之下。

我尽可能简化了代码，问题仍然存在。

问题的例子

的HTML

<!DOCTYPE HTML>

<html>
    <head>
        <title>Try</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <link rel="stylesheet" media="screen" href="css/style.css">
    </head>

    <body>
        <div id="particles-js"></div>
        <div>
            <p>Something here</p>
        </div>
    </body>

    <script src="assets/js/particles.js"></script>
    <script src="assets/js/app.js"></script>
</html>

的CSS

canvas{
  display:block;
  vertical-align:bottom;
  position: absolute;
}

/* ---- particles.js container ---- */

#particles-js{
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #b61924;
  background-image: url('');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  top: 0;
}

可以从之前发布的所有者的网站上下载APP.JS和PARTICLES.JS。我正在使用他们目前的主题

谢谢你的帮助

我已经完成了所有设置,我只是不知道如何通过react-particles-js创建的元素作为背景.

这是我到目前为止的代码:

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import NavTabs from "./components/NavTabs";
import Home from "./components/pages/Home";
import About from "./components/pages/About";
import Contact from "./components/pages/Contact";
import ParticlesContainer from "./components/ParticlesContainer";


function App() {
  return (
    <ParticlesContainer>
    <Router>
      <div>
        <NavTabs />
        <Route exact path="/" component={Home} />
        <Route exact path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </div>
    </Router>
    </ParticlesContainer>
  );
}

export default App;

但是,没有一个内容显示; 只有canvas元素是可见的,而其余部分似乎根本不呈现.

编辑:这是ParticleContainer代码:

import React, {Component} from 'react';
import Particles from 'react-particles-js';


class …

我制作了一个particle.js 背景，然后我制作了一个容器。在这个容器中，我有两个包含一些数据的表，当我减小屏幕尺寸时，容器本身超出了particle.js 背景。我也附上了我的问题的图片，请看一看。

这是我的一个大学项目，我试图从过去两天解决它，但没有得到任何具体的解决方案。

 <div id="particles-js">
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <table class="table">
            <thead>
              <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Email</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>John</td>
                <td>Doe</td>
                <td>john@example.com</td>
              </tr>
              <tr>
                <td>Mary</td>
                <td>Moe</td>
                <td>mary@example.com</td>
              </tr>
              <tr>
                <td>July</td>
                <td>Dooley</td>
                <td>july@example.com</td>
              </tr>
            </tbody>
          </table>
        </div>

canvas {
  display: block;
  vertical-align: bottom;
}

#particles-js {
  position: absolute;
  width: 100%;
  height: 100% !important;
  background: #00356B;
}

.container {
  margin-top: 20px;
  position: absolute;
  top: 50%;
  right: 50%;
  -webkit-transform: translate(50%, -50%);
  transform: translate(50%, -50%);
  color: #fff;
  max-width: 90%;
  padding: …

导入particle.js库时遇到问题.

我正在使用create-react-app,并且遵循粒子js github页面上的说明.

启动'create-react-app'后,我安装particle.js

npm install particles.js --save

然后在App.js文件中我的相关部分是:

import particlesJS from 'particles.js'

componentDidMount(){
    //particles.js github page says to load package like so:
    particlesJS.load('particles-js', 'assets/particles.json', function() {
      console.log('callback - particles.js config loaded');
    });
},

render() {
    return (
       <div>
            //div to include particles canvas, as specified in particles.js github page         
            <div id="particles-js"></div>
       </div>
);

}

但是控制台给出错误Uncaught TypeError:_particles2.default.load不是函数

如果我放入console.log(particlesJS)它会给出一个空对象,所以我很确定问题是我如何加载包.基本上,甚至没有加载包,这就是为什么particleJS对象上没有.load()函数可用.

任何想法如何解决这一问题？

顺便说一句,让包通过' react-particles-js '包工作,但仍然很好奇,看看如何直接使用package.js包让它工作.

我正在尝试设置与此类似的页面，此处的中心元素位于正在运行的动画的前面：https： //vincentgarreau.com/particles.js/#default

我设置了这样的内容，它占据了自己的空间，与其他内容分开，而不是后面：

我希望我的文本出现在粒子动画的前面。您能帮忙吗？我尝试使用“ z-index”没有成功：<div style="z-index: -1"></div>

我的完整代码在这里，或者仅在下面粘贴最重要的部分。

我将此添加到我的HTML：

 <!-- particles.js container -->
    <div id="particles-js"></div>
    <!-- particles.js lib - https://github.com/VincentGarreau/particles.js -->
    <script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"> 
    </script>

CSS：

body {
    background-color: #789;
    margin-left: 5px;
    margin-right: 5px;
    padding-top: 60px;
    z-index: 900;
    position:relative;
}
#particles-js {
    background-color: #255;
    z-index: 850;
    position:relative;
}

JS：

    window.addEventListener("hashchange", function() {
    scrollBy(0, -55);
});

particlesJS("particles-js", {
    particles: {
        number: { value: 80, density: { enable: true, value_area: 800 } },
        color: { value: "#ffffff" }, …

在页面之间导航时，Gatsby 会重新渲染particlejs 画布。有什么办法可以防止这种情况发生吗？

这是一个显示正在发生的事情的代码和框https://codesandbox.io/s/fervent-rgb-07hk1