barrior / jparticles Goto Github PK

import { Particle } from "jparticles";


 new Particle.WaveLoading('#mainLoad', {
      fillColor: '#27C9E5',
      crestHeight: 5,
      crestCount: 3,
      speed: 0.2,
      // 加载进度文本格式为空字符串时，不显示进度文本
      textFormatter: '',
      // 取消边框圆角
      borderRadius: '',
      // 设置遮罩图片，实现遮罩效果（如果希望防止图片闪烁，可提前加载完图片后再创建特效）
      mask: 'https://raw.githubusercontent.com/Barrior/assets/main/github-logo-text.svg',
  })

"use client";
import { Particle } from 'jparticles';
import React, { memo, useEffect } from 'react'

const ParticleEffect = () => {
    if(typeof window !== 'undefined')
{
// Your client-side code that uses window goes here
}
    useEffect(()=>{
        new Particle("#demo", {
          color: "#004AAD",
          lineShape: "spider",
          range: 200,
          proximity: 100,
        });
      },[]);
  return (
    typeof window !== 'undefined' &&  <div className="absolute w-full h-3/4" id="demo"></div>
  )
}

export default memo(ParticleEffect);

        <div class="layui-carousel " width="100%" height="600px" id="demo" lay-filter="login">
            <div carousel-item>
                <div>
                    <div class="jp1"></div>
                </div>
                <div>
                    <div class="jp2"></div>
                </div>
                <div>
                    <div class="jp3"></div>
                </div>
            </div>
        </div>

            //粒子线条
            $(".jp1").jParticle({
                background: "green",//背景颜色
                color: "#fff",//粒子和连线的颜色
                particlesNumber:100,//粒子数量
                //disableLinks:true,//禁止粒子间连线
                //disableMouse:true,//禁止粒子间连线(鼠标)
                particle: {
                    minSize: 1,//最小粒子
                    maxSize: 3,//最大粒子
                    speed: 30,//粒子的动画速度
                }
            });
            $(".jp2").jParticle({
                background: "red",//背景颜色
                color: "#fff",//粒子和连线的颜色
                particlesNumber:100,//粒子数量
                //disableLinks:true,//禁止粒子间连线
                //disableMouse:true,//禁止粒子间连线(鼠标)
                particle: {
                    minSize: 1,//最小粒子
                    maxSize: 3,//最大粒子
                    speed: 30,//粒子的动画速度
                }
            });