javascript 如何只在网站的英雄部分显示粒子?

wmvff8tz  于 2023-01-24  发布在  Java
关注(0)|答案(1)|浏览(139)

我做了一个登陆页面,我从react导入了tsparticles,但是它们出现在整个网站上,我被困在如何在hero/header组件上显示它们。
我试着在头文件中调用Particles组件而不是App,但是没有任何改变。以下是我用于Particles配置的代码

<Particles
        id="tsparticles"
        init={particlesInit}
        options={{
          fullScreen: {
            zIndex:1,
            enable: true,
          },
            background: {
                color: {
                    value: "##",
                },
            },
            fpsLimit: 30,
            interactivity: {
                events: {
                    onClick: {
                        enable: true,
                        mode: "push",
                    },
                    onHover: {
                        enable: true,
                        mode: "repulse",
                    },
                    resize: true,
                },
                modes: {
                    push: {
                        quantity: 4,
                    },
                    repulse: {
                        distance: 100,
                        duration: 0.4,
                    },
                },
            },
            particles: {
                color: {
                    value: "#ffffff",
                },
                links: {
                    color: "#ffffff",
                    distance: 150,
                    enable: true,
                    opacity: 0.3,
                    width: 1,
                },
                collisions: {
                    enable: true,
                },
                move: {
                    directions: "none",
                    enable: true,
                    outModes: {
                        default: "bounce",
                    },
                    random: false,
                    speed: 2,
                    straight: false,
                },
                number: {
                    density: {
                        enable: true,
                        area: 800,
                    },
                    value: 80,
                },
                opacity: {
                    value: 0.2,
                },
                shape: {
                    type: "circle",
                },
                size: {
                    value: { min: 1, max: 4 },
                },
            },
            detectRetina: true,
        }}
    />
ryevplcw

ryevplcw1#

tsParticle React文档列出了Particles元素的可用属性(此处列出)。其中之一是style属性。该文档在这一点上相当模糊,但似乎可以设置Particle画布的样式。
默认情况下,画布设置为position: fixed,其大小和位置可以填充屏幕。

style={{
    position: 'relative',
    display: 'block',
    width: '100%',
    height: '500px',
    zIndex: 0,
}}

在你的标题中的粒子元素上,看看你会得到什么。

相关问题