tsparticles
tsParticles 3.0.2
입자를 생성하기위한 가벼운 타입 라이브러리. 종속성 무료 (*), 브라우저 준비 및 react.js, vue.js (2.x 및 3.x), Angular, Svelte, JQuery, Preact, Inferno, Riot.js, Solid.js 및 웹 구성 요소와 호환됩니다.
@tsparticles/angularastro-particlesember-tsparticlesinferno-particlesjquery-particlespreact-particles@tsparticles/reactriot-particlessolid-particles@tsparticles/svelte@tsparticles/vue2@tsparticles/vue3web-particles@tsparticles/wordpress문서 및 개발 참조
이 라이브러리는 가장 인기있는 CDN 중 두 가지에서 사용할 수 있으며 입자를 사용하는 경우 쉽고 사용할 수 있습니다 .
필요한 모든 링크와 함께 아래 지침을 찾을 수 있으며 TypeScript 에 의해 무서워하지 않으면 소스 언어 일뿐입니다 .
출력 파일은 JavaScript입니다 . ?
CDNS 및 npm JavaScript , 번들 브라우저 준비 (tsparticles.engine.min.js)에 필요한 모든 소스가 있으며 모든 파일은 import Syntax로 분할되었습니다.
관심이 있으시면 이전 입자 .js 라이브러리에서 마이그레이션하도록 안내하기위한 몇 가지 간단한 지침이 있습니다.
이 호스트 또는 직접 사용하여 프로젝트에 tsparticles를로드하십시오.
https://unpkg.com/@tsparticles/confetti/ https://unpkg.com/@tsparticles/engine/ https://unpkg.com/@tsparticles/fireworks/ https://unpkg.com/@tsparticles/basic/basic/ https://unpkg.com/@tsparticles/slim/ https://unpkg.com/tsparticles/ https://unpkg.com/@tsparticles/all/
tsparticles confetti
tsparticles 엔진
tsparticles 불꽃 놀이
tsparticles 기본
tsparticles 슬림
tsparticles
tsparticles 모두
npm install @tsparticles/engineyarn add @tsparticles/enginepnpm install @tsparticles/engine const tsParticles = require ( "@tsparticles/engine" ) ;
// or
import { tsParticles } from "@tsparticles/engine" ; 가져온 tsParticles <script> 태그를 사용하여 페이지에 스크립트를 포함시킬 때와 동일한 인스턴스입니다.
tsparticles를로드하고 입자를 구성합니다.
index.html
< div id =" tsparticles " > </ div >
< script src =" tsparticles.engine.min.js " > </ script >app.js
// @path-json can be an object or an array, the first will be loaded directly, and the object from the array will be randomly selected
/* tsParticles.load(@params); */
tsParticles
. load ( {
id : "tsparticles" ,
url : "presets/default.json" ,
} )
. then ( container => {
console . log ( "callback - tsparticles config loaded" ) ;
} )
. catch ( error => {
console . error ( error ) ;
} ) ;
//or
tsParticles . load ( {
id : "tsparticles" ,
options : {
/* options here */
} ,
} ) ;
//or
tsParticles . load ( {
id : "tsparticles" ,
options : [
{
/* options here */
} ,
{
/* other options here */
} ,
] ,
} ) ;
//random object
tsParticles . load ( {
id : "tsparticles" ,
options : [
{
/* options here */
} ,
{
/* other options here */
} ,
] ,
index : 1 ,
} ) ; //the second one
// Important! If the index is not in range 0...<array.length, the index will be ignored.
// after initialization this can be used.
/* tsParticles.setOnClickHandler(@callback); */
/* this will be fired from all particles loaded */
tsParticles . setOnClickHandler ( ( event , particles ) => {
/* custom on click handler */
} ) ;
// now you can control the animations too, it's possible to pause and resume the animations
// these methods don't change the config so you're safe with all your configurations
// domItem(0) returns the first tsParticles instance loaded in the dom
const particles = tsParticles . domItem ( 0 ) ;
// play will start the animations, if the move is not enabled it won't enable it, it just updates the frame
particles . play ( ) ;
// pause will stop the animations
particles . pause ( ) ; @tsparticles/angular여기에서 사용 가능한 지침
astro-particles여기에서 사용 가능한 지침
ember-tsparticles여기에서 사용 가능한 지침
inferno-particles여기에서 사용 가능한 지침
jquery-particles여기에서 사용 가능한 지침
preact-particles여기에서 사용 가능한 지침
@tsparticles/react여기에서 사용 가능한 지침
riot-particles여기에서 지침을 찾을 수 있습니다
solid-particles여기에서 지침을 찾을 수 있습니다
@tsparticles/svelte여기에서 사용 가능한 지침
@tsparticles/vue2여기에서 사용 가능한 지침
@tsparticles/vue3여기에 사용 가능한 지시가 있습니다
web-particles여기에서 지침을 찾을 수 있습니다
@tsparticles/wordpressWordPress.org에서 호스팅되는 플러그인 페이지는 여기에서 찾을 수 있습니다.
실제로 공식 Tsparticles 플러그인은 존재하지 않지만 Premium Addons for Elementor 와 협력하고 있습니다.
이 저장소에는 사용할 준비가되어 있으며 실행하는 데 필요한 모든 것을 포함하는 번들 파일도 있습니다.
이 사전 설정은 흰색 배경에서 위쪽으로 움직이는 큰 색의 서클을로드합니다.
여기에서 지침을 찾을 수 있습니다
이 사전 설정은 흰색 배경에서 화면의 바닥에서 나오는 색상의 거품을로드합니다.
여기에서 지침을 찾을 수 있습니다
이 사전 설정은 화면 중심에서 투명한 배경으로 흰색과 빨간색 색종이를로드합니다.
여기에서 지침을 찾을 수 있습니다
이 사전 설정은 화재와 재 스파크처럼 채색 된 입자와 함께 희미한 빨간색을 검은 색 배경으로로드합니다.
여기에서 지침을 찾을 수 있습니다
이 사전 설정은 작은 반딧불과 같은 작은 페이딩 입자로 만든 마우스 트레일을로드합니다.
여기에서 지침을 찾을 수 있습니다
이 사전 설정은 아름다운 불꽃 효과를로드합니다.
여기에서 지침을 찾을 수 있습니다
여기에서 지침을 찾을 수 있습니다
여기에서 지침을 찾을 수 있습니다
여기에서 지침을 찾을 수 있습니다
여기에서 지침을 찾을 수 있습니다
여기에서 지침을 찾을 수 있습니다
여기에서 지침을 찾을 수 있습니다
여기에서는 tsparticles 관련 템플릿을 찾을 수 있습니다. 템플릿은 바닐라 JavaScript , Reactjs , vuejs , Angular , Sveltejs 및 기타 프레임 워크 용으로 만들어집니다.
템플릿은 다르거나 새로운 템플릿을 만들거나 최신 기능으로 업데이트되거나 더 나은 스타일로 변경 될 수 있습니다. 가끔 확인하십시오.
tsparticles 로 좋은 디자인을 만든 경우 멋진 템플릿으로 풀 요청을 제출하십시오. 템플릿 저자로 인정 받게됩니다!
https://github.com/tsparticles/templates
https://particles.js.org/samples
웹 사이트에서 모든 비디오 자습서를 여기에서 찾을 수 있습니다 : https://particles.js.org/video.html
더 많은 비디오가 곧 올 것입니다! 새로운 내용이 있는지 매일 확인하십시오.
입자 .json
여기에서 일부 구성 샘플을 찾을 수 있습니다
여기에서 사용 가능한 모든 옵션을 찾을 수 있습니다
Codepen에서 tsparticles 컬렉션을 만들었습니까? 또는 내 프로필을 확인할 수 있습니다
그렇지 않으면 아래에 데모 페이지 링크가 있습니다.
더 많은 데모를보고 싶습니까? 컴퓨터에서 저장소를 복제하고 다음 지침을 따르십시오.
$ pnpm i
$ pnpm run build
$ cd demo/vanilla
$ pnpm start팔! ? http : // localhost : 3000 그리고 다른 데모를 확인할 수 있습니다.
당신이 충분히 용감하다면 개발중인 기능을 시도하기 위해 dev Branch로 전환 할 수 있습니다.
Tsparticles 에는이 라이브러리가 100% 입자 구성과 호환되는 패키지가 있습니다.
진지하게, 당신은 단지 script를 particles.js에서 번들 호환성 패키지, et-voilà로 변경하면 준비가 되었습니까 ?!
여기에서 자세한 내용을 읽을 수 있습니다
스위치를 수행 해야하는 5 가지 이유를 알고 싶으십니까? 여기를 읽으십시오
아래에서는 tsparticles를 설치하는 데 필요한 모든 정보와 새로운 구문을 찾을 수 있습니다.
Tsparticles는 이제 일부 사용자 정의를 지원합니까?.
자신만의 플러그인을 만들 수 있습니다
여기에서 더 읽어보세요 ...
흐름도 TD
하위 그래프 코어 [핵심]
엔진 [tsparticles 엔진]
Perlin-Noise [Perlin Noise Lib]
Simplex-Noise [Simplex Noise Lib]
구성 [tsparticles configs]
끝
서브 그래프 번들-기본 [tsparticles basic]
하위 그래프 기본 무버 [이동자]
이동 기반 [베이스]
끝
서브 그래프 기본 모양 [모양]
형상이
끝
서브 그래프 기본 업데이트 [업데이트]
업데이트 컬러 [컬러]
업데이트-능력 [불투명도]
업데이트 아웃 모드 [출력 모드]
업데이트 크기 [크기]
끝
끝
엔진-> 번들-기본
서브 그래프 번들-콘 페티 [tsparticles confetti]
서브 그래프 confetti-plugins [플러그인]
플러그인 에미터
플러그인 모션
끝
서브 그래프 색종이 모양 [모양]
모양 카드
모양 에모 지
모양 중심
모양 이미지
모양-폴리 곤
모양 스퀘어
모양 스타
끝
서브 그래프 색종이 생기기 [업데이트]
업데이트 수명
업데이트 롤
업데이트 로테이트
업데이트-틸트
업데이터 징벌
끝
끝
번들-기본-> 번들 코페티
서브 그래프 번들 슬림 [tsparticles Slim]
서브 그래프 슬림 상호 작용 [상호 작용]
서브 그라프 슬림 상호 작용 -External [externals]
상호 작용-비전문서 [유치]
상호 작용-비전소-벤스 [바운스]
상호 작용-비전구 [버블]
상호 작용 -External-Connect [Connect]
상호 작용-외부-그라브 [grab]
상호 작용-비전면 [일시 정지]
상호 작용 -External-Push [푸시]
상호 작용-비면-감각 [제거]
상호 작용-비전-반복 [repulse]
상호 작용-외부 슬로우 [느린]
끝
서브 그라프 슬림 상호 작용-입자 [입자]
상호 작용-입자-참조 [유치]
상호 작용-입자-충돌 [충돌]
상호 작용-입자-링크 [링크]
끝
끝
서브 그래프 슬림 무발 [이동]
Move-Parallax [Parallax]
끝
서브 그래프 슬림 플루인 [플러그인]
서브 그라프 슬림 플루인 링 [완화]
플러그인 잉-쿼드 [쿼드]
끝
끝
서브 그래프 슬림 모양 [모양]
Shape-Emoji [이모티콘]
모양 이미지 [이미지]
형상 선 [선]
모양-폴리 곤 [다각형]
형상-제곱 [정사각형]
모양 별 [스타]
끝
서브 그래프 슬림 업데이터 [업데이트]
업데이트 라이프 [삶]
업데이트 로테이트 [회전]
업데이트 스트로크 컬러 [스트로크 컬러]
끝
끝
번들-기본-> 번들 슬림
서브 그래프 번들 파이어 워크 [tsparticles 불꽃 놀이]
하위 그래프 불꽃 놀이-효과 [효과]
효과-트레일
끝
하위 그래프 불꽃 놀이 -Plugins [플러그인]
플러그인 에미터
서브 그래프 불꽃 놀이-플루인-에미터 모양 [이미 터 셰이프]
플러그인 에미터 모양의 제곱
끝
플러그인 사운드
끝
하위 그래프 불꽃 놀이 업다이터 [업데이트]
업데이트 파괴
업데이트 수명
업데이트 로테이트
끝
끝
번들-기본-> 번들 파이어 워크
서브 그라프 묶음 [tsparticles]
서브 그래프 전체 간극 [상호 작용]
서브 그래프 전체 간호 작용 -External [externals]
상호 작용-비전-트레일 [트레일]
끝
끝
서브 그래프 전체 플러그 인 [플러그인]
플러그인-흡수기 [흡수기]
플러그인 에미터 [Emitters]
서브 그래프 전체 플루그인-에미터 모양 [이미 터 모양]
플러그인 에미터 모양의 원근 [원]
플러그인 에미터 모양의 제곱 [사각형]
끝
끝
서브 그래프 전체 모양 [모양]
Shape-Text [Text]
끝
하위 그래프 전체 업데이터 [업데이트]
업데이트 파괴 [파괴]
업데이트 롤 [롤]
업데이트 틸트 [틸트]
updater-twinkle [twinkle]
업데이터-멍청이 [wobble]
끝
끝
번들-슬림-> 번들-풀
서브 그래프 번들 all [tsparticles all]
번들 -pjs [tsparticles particles.js 호환성]
서브 그래프 모든 효과 [효과]
이펙트 버블 [버블]
이펙트-트레일 [트레일]
끝
서브 그래프 올 인터레이션 [상호 작용]
서브 그래프 올 인터레이션-외부 [외부]
상호 작용-비단 입자 [입자]
상호 작용 -External-Pop [POP]
끝
상호 작용 라이트 [빛]
서브 그래프 올 인터레이션-입자 [입자]
상호 작용-입자-반복 [Repulse]
끝
끝
서브 그래프 올 출신 [Paths]
Path-Curl-Noise [컬 노이즈]
Path-Curves [곡선]
Path-Perlin-Noise [Perlin Noise]
Path-Polygon [다각형]
Path-Simplex-Noise [Simplex Noise]
Path-SVG [SVG]
끝
서브 그래프 All-Plugins [플러그인]
플러그인 -Canvas 마스크 [캔버스 마스크]
서브 그래프 올 플루인 싱 (Easings) [완화]
플러그인 싱싱 백 [백]
플러그인 싱싱-캐릭 [Circ]
플러그인 싱싱 큐빅 [Cubic]
플러그인 잉-expo [엑스포]
플러그인 싱싱 라이너 [선형]
플러그인 잉-쿼트 [쿼트]
플러그인 잉-quint [Quint]
플러그인 잉-사인 [사인]
끝
서브 그래프 All-Plugin-Emitters-Shapes [Emitters Shapes]
플러그인 에미터 모양의 캔버스 [캔버스]
플러그인 에미터 모양의 경로 [경로]
플러그인 에미터 모양의 폴리곤 [다각형]
끝
서브 그래프 all-plugins-exports [수출]
Plugin-Export-Image [이미지]
Plugin-Export-JSON [JSON]
Plugin-Export-Video [비디오]
끝
플러그인 -HSV-Color [HSV 색상]
플러그인 감염 [감염]
플러그인 모션 [모션]
플러그인 -Pooisson-Disc [Poisson Disc]
플러그인 폴리곤 마스크 [다각형 마스크]
플러그인 사운드 [사운드]
끝
서브 그래프 올 모양 [모양]
모양 화살 [화살표]
모양 카드 [카드]
Shape-Cog [COG]
모양 심장 [심장]
모양 경로 [경로]
모양이 다소 폴리그폰 [둥근 다각형]
모양이 둥근 렉스 [둥근 직장]
모양-정신적 [나선형]
끝
서브 그래프 all-updaters [updaters]
업데이트 등급 [그라디언트]
업데이트 궤도 [궤도]
끝
Simplex-Noise-> Path-Curl-Noise
Perlin-Noise-> Path-Perlin-Noise
Simplex-Noise-> Path-Simplex-Noise
끝
번들 풀-> 번들-all
2020-2022 오픈 소스 라이센스의 JetBrains에게 큰 감사를드립니다!
JetBrains Webstorm 은이 프로젝트를 유지하는 데 사용됩니다.
