JS 라 이브 러 리 의 Particles JS 사용 안내

11343 단어 particlesjs쓰다
particles.js
A lightweight JavaScript library for creating particles.
입자 배경 을 만 드 는 경량급 JavaScript 라 이브 러 리
효과 도 를 살 펴 보 겠 습 니 다.
표준 판:
particles-标准版  
별표:
particles-星空版  
거품 판:
particles-泡泡版  
눈 이 내리 면:
particles-下雪版
이 걸 이용해서 저희 가 뭘 할 수 있 을까요?
나 는 이것 이 배경 이 없 는 페이지 에 사용 하기에 비교적 적합 하 다 고 생각한다.또는 적당 한 그림 을 찾 지 못 해서 배경 을 만 들 수 없다 면 우 리 는 모두 이것 을 사용 할 수 있다.
예 를 들 면:
particles-demo1
혹은
particles-demo2
응,효과 가 다 좋아.
그렇다면 particles.js 를 어떻게 사용 하 는 지 소개 한다.
particles JS 는 Github 에서 시 작 됩 니 다https://github.com/VincentGarreau/particles.js
이 항목 에는 demo 를 제공 합 니 다.이 항목 을 직접 다운로드 하고 demo 에 있 는 index.html 파일 을 열 면 효 과 를 볼 수 있 습 니 다.
그렇다면 우리 가 프로젝트 를 구축 하려 면 파일 을 어떻게 도입 해 야 할 까?
제안 은 다음 과 같 습 니 다.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>particles.js</title>
 <meta name="description" content="particles.js is a lightweight JavaScript library for creating particles.">
 <meta name="author" content="Vincent Garreau" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 <link rel="stylesheet" media="screen" href="css/style.css" rel="external nofollow" >
</head>
<body>
<div id="particles-js"></div>
<!-- scripts -->
<script src="js/particles.js"></script>
<script src="js/app.js"></script>
</body>
</html>
particles.js 는 라 이브 러 리 입 니 다.우 리 는 반드시 도입 해 야 합 니 다.app.js 는 매개 변수 설정 파일 입 니 다.우리 도 도입 해 야 합 니 다.demo 의 stats.js 는 도입 할 필요 가 없습니다.
style.css 도 도입 할 수 있 습 니 다.배경 색 은 css 에서 설정 되 어 있 습 니 다.
이 템 플 릿 을 바탕 으로 우 리 는 위 에 우리 가 실현 하고 자 하 는 기능 을 추가 할 수 있 습 니 다.예 를 들 어 로그 인 기능 을 등록 할 때 주의해 야 할 것 은:
div 로 우리 가 실현 하고 자 하 는 기능 코드 블록 을 밀봉 하고 css 에서 이 div 에 절대적 인 포 지 셔 닝 을 설정 합 니 다.
인자 프로필 app.js 파일 의 사용 을 소개 합 니 다.
particles.number.value:입자 의 수
particles.number.density:입자 의 희 밀 정도
particles.number.density.enable:입자 의 희 밀 도 를 사용 합 니 다(true 또는 false)
particles.number.density.value_area:모든 입자 가 차지 하 는 공간(입자 밀 도 를 사용 해 야 사용 가능)
particles.color.value:입자 의 색상(16 진법 지원)\#b61924",rgb"{r:182,g:25,b:36}"hsl,random)
particles.shape.type:입자 의 모양("circle","edge","triangle","polygon","star","image")
particles.opacity.value:입자 의 투명도
particles.size.anim.enable:입자 속도(true/false)를 사용 할 지 여부
particles.size.anim.speed:입자 애니메이션 주파수
particles.size.anim.sync:입자 운행 속도 와 애니메이션 동기 화 여부
particles.move.speed:입자 이동 속도
이 프로필 에 따라 원 하 는 배경 을 설정 할 수 있 습 니 다.다음은 두 개의 전체 프로필 app.js 를 제공 합 니 다.
프로필 1(고전 배경):

{
 "particles": {
 "number": {
  "value": 80,
  "density": {
  "enable": true,
  "value_area": 800
  }
 },
 "color": {
  "value": "#ffffff"
 },
 "shape": {
  "type": "polygon",
  "stroke": {
  "width": 0,
  "color": "#000000"
  },
  "polygon": {
  "nb_sides": 5
  },
  "image": {
  "src": "img/github.svg",
  "width": 100,
  "height": 100
  }
 },
 "opacity": {
  "value": 0.5,
  "random": false,
  "anim": {
  "enable": false,
  "speed": 1,
  "opacity_min": 0.1,
  "sync": false
  }
 },
 "size": {
  "value": 3,
  "random": true,
  "anim": {
  "enable": false,
  "speed": 40,
  "size_min": 0.1,
  "sync": false
  }
 },
 "line_linked": {
  "enable": true,
  "distance": 150,
  "color": "#ffffff",
  "opacity": 0.4,
  "width": 1
 },
 "move": {
  "enable": true,
  "speed": 6,
  "direction": "none",
  "random": false,
  "straight": false,
  "out_mode": "out",
  "bounce": false,
  "attract": {
  "enable": false,
  "rotateX": 600,
  "rotateY": 1200
  }
 }
 },
 "interactivity": {
 "detect_on": "canvas",
 "events": {
  "onhover": {
  "enable": true,
  "mode": "repulse"
  },
  "onclick": {
  "enable": true,
  "mode": "push"
  },
  "resize": true
 },
 "modes": {
  "grab": {
  "distance": 400,
  "line_linked": {
   "opacity": 1
  }
  },
  "bubble": {
  "distance": 400,
  "size": 40,
  "duration": 2,
  "opacity": 8,
  "speed": 3
  },
  "repulse": {
  "distance": 200,
  "duration": 0.4
  },
  "push": {
  "particles_nb": 4
  },
  "remove": {
  "particles_nb": 2
  }
 }
 },
 "retina_detect": false
}
설정 파일 2(별빛 배경):

{
 "particles": {
 "number": {
  "value": 160,
  "density": {
  "enable": true,
  "value_area": 800
  }
 },
 "color": {
  "value": "#ffffff"
 },
 "shape": {
  "type": "circle",
  "stroke": {
  "width": 0,
  "color": "#000000"
  },
  "polygon": {
  "nb_sides": 5
  },
  "image": {
  "src": "img/github.svg",
  "width": 100,
  "height": 100
  }
 },
 "opacity": {
  "value": 1,
  "random": true,
  "anim": {
  "enable": true,
  "speed": 1,
  "opacity_min": 0,
  "sync": false
  }
 },
 "size": {
  "value": 3,
  "random": true,
  "anim": {
  "enable": false,
  "speed": 4,
  "size_min": 0.3,
  "sync": false
  }
 },
 "line_linked": {
  "enable": false,
  "distance": 150,
  "color": "#ffffff",
  "opacity": 0.4,
  "width": 1
 },
 "move": {
  "enable": true,
  "speed": 1,
  "direction": "none",
  "random": true,
  "straight": false,
  "out_mode": "out",
  "bounce": false,
  "attract": {
  "enable": false,
  "rotateX": 600,
  "rotateY": 600
  }
 }
 },
 "interactivity": {
 "detect_on": "canvas",
 "events": {
  "onhover": {
  "enable": true,
  "mode": "bubble"
  },
  "onclick": {
  "enable": true,
  "mode": "repulse"
  },
  "resize": true
 },
 "modes": {
  "grab": {
  "distance": 400,
  "line_linked": {
   "opacity": 1
  }
  },
  "bubble": {
  "distance": 250,
  "size": 0,
  "duration": 2,
  "opacity": 0,
  "speed": 3
  },
  "repulse": {
  "distance": 400,
  "duration": 0.4
  },
  "push": {
  "particles_nb": 4
  },
  "remove": {
  "particles_nb": 2
  }
 }
 },
 "retina_detect": true
}
총결산
위 에서 말 한 것 은 편집장 님 께 서 소개 해 주신 Particles JS 의 프로필 입 니 다.여러분 께 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
JavaScript 대상 개요(하부)
페이지 로 딩 속 도 를 높이 는 플러그 인 InstantClick

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage