Solid.js 입자( solid-particles )

공식tsParticles Solid.js 구성 요소

나는 단지 코드 샘플을 원한다

추가 텍스트가 없는 작업 샘플입니다. 작동하는 것을 확인하고 코드를 실험하려는 사람을 위한 것입니다.



이제 이것을 달성하는 방법을 보자

설치

npm install solid-particles solid-js

또는

yarn add solid-particles solid-js

사용하는 방법

암호

예:

원격 URL

import Particles from "solid-particles";

function App() {
  return (
    <div class="App">
      <Particles
        id="tsparticles"
        options={{
          background: {
            color: "#000",
          },
          fullScreen: {
            enable: true,
          },
        }}
      />
    </div>
  );
}

옵션 개체

import Particles from "solid-particles";

class App extends Component {
  constructor(props) {
    super(props);

    this.particlesInit = this.particlesInit.bind(this);
    this.particlesLoaded = this.particlesLoaded.bind(this);
  }

  particlesInit(main) {
    console.log(main);

    // you can initialize the tsParticles instance (main) here, adding custom shapes or presets
  }

  particlesLoaded(container) {
    console.log(container);
  }

  render() {
    return (
      <Particles
        id="tsparticles"
        init={this.particlesInit}
        loaded={this.particlesLoaded}
        options={{
          background: {
            color: {
              value: "#0d47a1",
            },
          },
          fpsLimit: 60,
          interactivity: {
            detectsOn: "canvas",
            events: {
              onClick: {
                enable: true,
                mode: "push",
              },
              onHover: {
                enable: true,
                mode: "repulse",
              },
              resize: true,
            },
            modes: {
              bubble: {
                distance: 400,
                duration: 2,
                opacity: 0.8,
                size: 40,
              },
              push: {
                quantity: 4,
              },
              repulse: {
                distance: 200,
                duration: 0.4,
              },
            },
          },
          particles: {
            color: {
              value: "#ffffff",
            },
            links: {
              color: "#ffffff",
              distance: 150,
              enable: true,
              opacity: 0.5,
              width: 1,
            },
            collisions: {
              enable: true,
            },
            move: {
              direction: "none",
              enable: true,
              outMode: "bounce",
              random: false,
              speed: 6,
              straight: false,
            },
            number: {
              density: {
                enable: true,
                value_area: 800,
              },
              value: 80,
            },
            opacity: {
              value: 0.5,
            },
            shape: {
              type: "circle",
            },
            size: {
              random: true,
              value: 5,
            },
          },
          detectRetina: true,
        }}
      />
    );
  }
}

소품

소품
유형
정의


너비
끈
캔버스의 너비입니다.

키
끈
캔버스의 높이입니다.

옵션
물체
입자 인스턴스의 옵션입니다.

URL
끈
AJAX 요청을 사용하여 호출되는 원격 옵션 URL

스타일
물체
캔버스 요소의 스타일입니다.

클래스 이름
끈
캔버스 래퍼의 클래스 이름입니다.

캔버스 클래스 이름
끈
캔버스의 클래스 이름.

컨테이너
물체
particles container의 인스턴스

초기화
기능
이 함수는 tsParticles 인스턴스 초기화 후 호출되며, 인스턴스는 매개변수이며 여기에서 사용자 지정 사전 설정 또는 모양을 로드할 수 있습니다.

짐을 실은
기능
이 함수는 파티클이 캔버스에 올바르게 로드될 때 호출되며 현재 컨테이너는 매개변수이며 여기에서 사용자 정의할 수 있습니다.


매개변수 구성을 찾습니다here.

시민

CodeSandbox를 사용하여 생성된 공식 샘플을 볼 수 있습니다here.

데모 웹사이트는 here입니다.

https://particles.js.org

능동적으로 유지 관리되고 업데이트되는 CodePen 모음도 있습니다here.

https://codepen.io/collection/DPOage