이 글은 주로 vue에서 JS 라이브러리에 있는 Particles.js의 적용 사례 분석을 소개하고 있습니다. 필요하신 분들은 참고하시면 됩니다.
Zhihu 홈페이지 뒤에 있는 파티클 애니메이션 효과는 항상 검색해 보니까 정말 멋있는 것 같아요. Particle.js를 사용하여 작성되었습니다. 마침 현재 프로젝트에서 Vue 프레임워크를 사용하고 있어서 두 사람이 함께 배웠습니다.
솔직히 잘만 활용하면 지금 제가 쓰고 있는 프로젝트처럼 페이지가 아주 멋질 수 있을 것 같아요
멋진 로그인 페이지
heehee~
particle.js를 설치하세요
npm install --save particles.js
파티클 구성.js
1.data
이 데이터는 페이지에 표시되는 파티클의 상태를 제어하는 데 사용됩니다.
{ "particles": { "number": { "value": 60, "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": 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": 4, "direction": "none", "random": false, "straight": false, "out_mode": "out", "bounce": false, "attract": { "enable": false, "rotateX": 100, "rotateY": 1200 } } }, "interactivity": { "detect_on": "Window", "events": { "onhover": { "enable": true, "mode": "grab" }, "onclick": { "enable": true, "mode": "push" }, "resize": true }, "modes": { "grab": { "distance": 140, "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": true }
2.template
여기서 동적 입자가 표시됩니다.
<p id="particles"></p>
3.script
돔 트리와 관련되어 있기 때문에, 마운팅이 완료된 후 Particle.js를 초기화해야 합니다. 첫 번째 매개변수 id는 템플릿에서 얻는 ID 이름입니다. 작성하려는 경우에는 입자입니다. 두 번째 매개변수는 데이터가 저장되는 경로입니다. 저는 개인적으로 상대 경로를 사용하는 것을 권장합니다. ㅋㅋㅋ . 사용 범위가 상대적으로 작다면 현재 vue 파일의 스크립트에 직접 도입할 수도 있는데, 즉
mounted(){ particlesJS.load('id','path to your particles.data'); }
또는 관리하기 어렵다고 생각되면 메인 파일에 넣어야 합니다.
#particles{ position: absolute; width: 100%; height: 100%; background-color: #b61924; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; }
위 내용은 vue의 JS 라이브러리에 있는 Particles.js의 적용 예제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!