Particles.js 기반 초 현 입자 동적 배경 효과 만 들 기(모방)

오랫동안 로그 인하 지 못 했 습 니 다.로그 인 페이지 의 입자 동적 효과 가 매우 뛰 어 나 는 것 을 발 견 했 습 니 다.코드 를 찾 아 보 세 요.Particles.js 는 Canvas 캔버스 를 기반 으로 입자 과립 효 과 를 만 들 었 습 니 다.
위의 그림

위의 그림: 
비 글 이 있 는 것 같 아서 그대로 만 들 고 놀 았 다.

github: https://github.com/VincentGarreau/particles.js/
작업 과정:
인터넷 에 기본 적 인 절차 가 있 으 니 참고 하 셔 도 됩 니 다.하지만 로그 인 페이지 에 직접 사용 하면 작은 bug 가 있 을 수 있 으 므 로 조정 이 필요 합 니 다.
1.먼저 페이지 에 particles.js 파일 을 도입 합 니 다.

<script src="js/particles.js"></script>

2.페이지 에 입자 가 놓 인 용기 로 div 를 사용 합 니 다.[일반적으로 맨 밑 에 놓 습 니 다.css 는 개선 이 필요 합 니 다.]

<div id="particles"></div>
<style type="text/css">
 #particles {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1; //  z-index                    ，     ，           。
  background-color: #26AFE3;
 }
</style>

3.프로필 불 러 오기:  인터넷 상에 서 load()방법 으로 설 정 된 json 파일 을 만들어 야 하 는데 경로 만으로 도 나 를 망 쳤 다.
                  공식 데모 참조  http://codepen.io/VincentGarreau/pen/pnlso
                  js 에 직접 설정 쓰기

<script type="text/javascript">
// particlesJS.load('particles', './js/app/particles.json', function() {
//  console.log('callback - particles.js config loaded');
// });
particlesJS("particles", {
 "particles": {
  "number": {
   "value": 30,
   "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": 0.5,
   "random": false,
   "anim": {
    "enable": false,
    "speed": 1,
    "opacity_min": 0.1,
    "sync": false
   }
  },
  "size": {
   "value": 10,
   "random": true,
   "anim": {
    "enable": false,
    "speed": 50,
    "size_min": 0.1,
    "sync": false
   }
  },
  "line_linked": {
   "enable": true,
   "distance": 300,
   "color": "#ffffff",
   "opacity": 0.4,
   "width": 2
  },
  "move": {
   "enable": true,
   "speed": 8,
   "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": false,
    "mode": "repulse"
   },
   "onclick": {
    "enable": false,
    "mode": "push"
   },
   "resize": true
  },
  "modes": {
   "grab": {
    "distance": 800,
    "line_linked": {
     "opacity": 1
    }
   },
   "bubble": {
    "distance": 800,
    "size": 80,
    "duration": 2,
    "opacity": 0.8,
    "speed": 3
   },
   "repulse": {
    "distance": 400,
    "duration": 0.4
   },
   "push": {
    "particles_nb": 4
   },
   "remove": {
    "particles_nb": 2
   }
  }
 },
 "retina_detect": true
});
</script>

4.매개 변수 option 설정 및 사용:  option  github 홈 페이지 에 자세 한 정보 가 있 습 니 다.입자 수 조절 운동 속도 같은 거.
   particles 를 사용 하 는 데 문제 가 있 습 니 다.chrome 에서 파일 을 다운로드 한 후에 이 페이지 로 전환 하면 불구 가 됩 니 다.해결 방법 을 기다리다.
총결산
위 와 같이 소 편 이 소개 한 Particles.js 기반 초 현 입자 동적 배경 효과(모방)를 만 드 는 것 입 니 다.도움 이 되 셨 으 면 좋 겠 습 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 은 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!