JS 라 이브 러 리 의 Particles.js 중국어 개발 매 뉴 얼 및 파라미터 상세 설명

자신 이 제품 을 만들어 야 하기 때문에 좋 은 UI 인터페이스 도 매우 중요 하 다.이런 산란 한 원자 과립 효과 가 괜 찮 은 것 을 발견 하고 하 나 를 만 들 었 다.
공식 github:https://github.com/VincentGarreau/particles.js/
demo 제작 기,FQ 가 필요 할 수 있 습 니 다.
4.567915.이것 은 당신 이 만 든 demo 를 내 보 낼 수 있 습 니 다.
이것 은 다른 효 과 를 설정 하 는 데 사용 할 수 있 습 니 다.
사용 방법
particle.js 를 불 러 오고 입 자 를 설정 합 니 다:
index.html


<div id="particles-js"></div>
<script src="particles.js"></script>

app.js


/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
particlesJS.load('particles-js', 'assets/particles.json', function() {
 console.log('callback - particles.js config loaded');
});

particles.json 이 주요 프로필 입 니 다.
파일 순서 에 주의 하 세 요.그렇지 않 으 면 문제 가 생 길 수 있 습 니 다.
실제 데모


<!DOCTYPE html>
<html >
<head>
 <meta charset="UTF-8">
 <title>particles.js</title>
  <link rel="stylesheet" href="style.css" rel="external nofollow" >
</head>
<body>
<div id="particles-js"></div>
</body>
 <script src='particles.min.js'></script>           
 <script src="index.js"></script>
</html>

demo 를 다운로드 할 필요 가 있 으 면 QQ 군 으로 오 세 요.검은색 원자 효 과 는 매우 공상 과학 적 이 고 괜 찮 습 니 다.
css 색상 과 json 설정 파일 에 따라 자신 만 의 공상 과학 효 과 를 만 듭 니 다.
매개 변수
키 값
매개 변수 옵션/설명
실례particles.number.valuenumber 수량40 particles.number.density.enableboolean   true / false particles.number.density.value_areanumber 영역 산포 밀도 크기800 particles.color.valueHEX (string)
RGB (object)
HSL (object)
array selection (HEX)
random (string)
원자 색"#b61924" {r:182, g:25, b:36} {h:356, s:76, l:41} ["#b61924", "#333333", "999999"] "random" particles.shape.typestring
array selection 원자의 모양"circle" "edge" "triangle" "polygon" "star" "image" ["circle", "triangle", "image"] particles.shape.stroke.widthnumber 원리 의 폭2 particles.shape.stroke.colorHEX (string) 원자 색"#222222" particles.shape.polygon.nb_slidesnumber 원자의 다각형 변수5 particles.shape.image.srcpath link
svg / png / gif / jpg 원자 그림 은 사용자 정의 그림 을 사용 할 수 있 습 니 다."assets/img/yop.svg" "http://mywebsite.com/assets/img/yop.png" particles.shape.image.widthnumber
(for aspect ratio) 그림 너비100 particles.shape.image.heightnumber
(for aspect ratio)그림 높이100 particles.opacity.valuenumber (0 to 1) 불투명 도0.75 particles.opacity.randomboolean 무 작위 불투명 도true / false particles.opacity.anim.enableboolean 그 라 데 이 션 애니메이션true / false particles.opacity.anim.speednumber 그 라 데 이 션 애니메이션 속도3 particles.opacity.anim.opacity_minnumber (0 to 1)   그 라 데 이 션 애니메이션 투명도0.25 particles.opacity.anim.syncbooleantrue / false particles.size.valuenumber 원자 크기20 particles.size.randomboolean 원자 크기 랜 덤true / false particles.size.anim.enableboolean 원자 그 라 데 이 션true / false particles.size.anim.speednumber   원자 그 라 데 이 션 속도3 particles.size.anim.size_minnumber0.25 particles.size.anim.syncbooleantrue / false particles.line_linked.enableboolean 연결선true / false particles.line_linked.distancenumber   연결선 거리150 particles.line_linked.colorHEX (string)   연결 선 색상#ffffff particles.line_linked.opacitynumber (0 to 1) 연결선 불투명 도0.5 particles.line_linked.widthnumber   연결선 너비1.5 particles.move.enableboolean 원자 이동true / false particles.move.speednumber 원자 이동 속도4 particles.move.directionstring 원자 이동 방향"none" "top" "top-right" "right" "bottom-right" "bottom" "bottom-left" "left" "top-left" particles.move.randomboolean 무 작위 방향 이동true / false particles.move.straightboolean 직접 이동true / false particles.move.out_modestring
(out of canvas) 캔버스 이동 여부"out" "bounce" particles.move.bounceboolean
(between particles) 점프 이동 여부true / false particles.move.attract.enableboolean 원자 간 끌 림true / false particles.move.attract.rotateXnumber   원자 간 끌 림 X 수평 거리3000 particles.move.attract.rotateYnumber y 수직 거리1500 interactivity.detect_onstring 원자 간 상호작용 검 측"canvas", "window" interactivity.events.onhover.enableboolean 서 스 펜 션true / false interactivity.events.onhover.modestring
array selection
서 스 펜 션 모드 "grab" 가 까 운 것 을 잡다"bubble"   거품 공 효과"repulse" 넉 백 효과["grab", "bubble"] interactivity.events.onclick.enableboolean 클릭 효과true / false interactivity.events.onclick.modestring
array selection
클릭 효과 모드"push" "remove" "bubble" "repulse" ["push", "repulse"] interactivity.events.resizeboolean 상호 이벤트 조정true / false interactivity.events.modes.grab.distancenumber 원자 상호작용 캡 처 거리100 interactivity.events.modes.grab.line_linked.opacitynumber (0 to 1) 원자 상호작용 캡 처 거리 연결선 불투명 도0.75 interactivity.events.modes.bubble.distancenumber 원자 캡 처 거품 효과 사이 의 거리100 interactivity.events.modes.bubble.sizenumber   원자 캡 처 거품 효과 사이 의 크기40 interactivity.events.modes.bubble.durationnumber 원자 캡 처 거품 효과 간 지속 이벤트
(second)0.4 interactivity.events.modes.repulse.distancenumber   넉 백 효과 거리200 interactivity.events.modes.repulse.durationnumber 넉 백 효과 지속 이벤트
(second)1.2 interactivity.events.modes.push.particles_nbnumber   입자 출시 량4 interactivity.events.modes.push.particles_nbnumber4 retina_detectbooleantrue / false총결산
위 에서 말 한 것 은 소 편 이 여러분 에 게 소개 한 JS 라 이브 러 리 의 Particles.js 중국어 개발 매 뉴 얼 과 파라미터 에 대한 상세 한 설명 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Rails에서 particles.제가 js를 써봤어요.

javascript 라이브러리의particle.나는 js를 써 보았다. 도중에 생각대로 하나하나 헷갈리기 때문에 순조로운 방법을 써야 한다. 마우스의 운동 설정에 맞춰 기하학적 무늬와 우주 같은 입자 애니메이션을 즐...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

JS 라 이브 러 리 의 Particles.js 중국어 개발 매 뉴 얼 및 파라미터 상세 설명

좋은 웹페이지 즐겨찾기