问如何在nextjs上设置粒子背景？
EN

Stack Overflow用户

提问于 2022-04-14 18:18:14

回答 1查看 948关注 0票数 5

我想在我的网页应用程序的一个页面上设置一个粒子背景。我使用了以下代码：

import styles from "../styles/Page.module.css";
import Particles from "react-tsparticles";

const particlesOptions = {
    background: {
      color: {
        value: "transparent",
      },
    },
    fpsLimit: 120,
    interactivity: {
      events: {
        onClick: {
          enable: false,
          mode: "push",
        },
        onHover: {
          enable: false,
          mode: "repulse",
        },
        resize: true,
      },
      modes: {
        bubble: {
          distance: 400,
          duration: 2,
          opacity: 0.8,
          size: 40,
        },
        push: {
          quantity: 4,
        },
        repulse: {
          distance: 200,
          duration: 0.4,
        },
      },
    },
    fullScreen: {
      enable: false,
      zIndex: 0
    },
    particles: {
      color: {
        value: "#ffffff",
      },
      links: {
        color: "#ffffff",
        distance: 150,
        enable: false,
        opacity: 0.5,
        width: 1,
      },
      collisions: {
        enable: false,
      },
      move: {
        direction: "top",
        enable: true,
        outMode: "out",
        random: false,
        speed: 3,
        straight: false,
      },
      number: {
        density: {
          enable: true,
          area: 800,
        },
        value: 30,
      },
      opacity: {
        value: 0.9,
      },
      shape: {
        type: "edge",
      },
      size: {
        random: true,
        value: 3,
      },
    },
  detectRetina: true,
}

const Page = () => {
    return (
        <div className={styles.page}>
          <Particles className={styles.particles} options={particlesOptions} />
        </div>
    );
};

export default Page;

页面有100 The (styles.page)，我尝试将className设置为粒子组件，如下所示：

.particles {
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 0;
 }

但是它没有显示粒子，背景是红色的，粒子被设置为白色。我还试着用这种方法来设置粒子成分：

const Page = () => {
    return (
        <>
            <Particles className={styles.particles} options={particlesOptions} />
            <div className={styles.page}>
            </div>
        </>
    );
};

但这个还是没用的。我也尝试将高度和宽度设置为100%。拜托，有办法让这件事成功吗？

reactjs

web

javascript

html

css

回答 1

Stack Overflow用户

发布于 2022-07-19 04:43:23

我可能太迟了，但我希望这会对某人有所帮助。

我在Next.js上也遇到了同样的问题，并且能够通过遵循docs 这里来使它正常工作。

基本上，您必须添加主tsparticles包并使用它导出的函数loadFull来加载粒子。

例如，这就是它的样子。

import styles from "../styles/Page.module.css";
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";

const options = {
    //options
};

const Page = () => {
    const particlesInit = async (main: Engine) => {
    // you can initialize the tsParticles instance (main) here, adding custom shapes or presets
    // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
    // starting from v2 you can add only the features you need reducing the bundle size
    await loadFull(main);
};

    return (
        <div className={styles.page}>
            <Particles className={styles.particles} init={particlesInit} options={particlesOptions} />
        </div>
    );

};

export default Page;