Particle.Js(및 이제 tsParticle.js), 캔버스를 사용하는 재미있는 방법!

Particles.js

캔버스로 할 수 있는 멋진 일로 손을 더럽히겠다고 약속한 지 오래되었습니다.
오늘은 캔버스 컨셉의 힘을 살짝 맛보았습니다. 정말 아름다운 라이브러리를 사용하기로 했습니다: Particle.Js
매우 흥미로운 실험이었습니다. 내 데모는 정말 필수적이지만 의사 소통하고 다른 분위기를 만드는 예술 형식으로 디자인을 최대한 활용하려는 프로젝트에 엄청난 잠재력이 있다는 것을 깨달았습니다.



결국 캔버스의 개념은 우리가 원하는 것으로 채울 수 있는 흰색 캔버스에 대한 명시적 참조에 지나지 않습니다.
따라서 Particle.Js를 사용하면 안정적이고 깨끗하며 사용자 정의 가능한 코드를 작업하는 것이 정말 간단합니다.

Vincent Garreau(Particle.Js 작성자)가 제공한 도구에서 캔버스를 편집하고 Codepen에 게시하기만 하면 됩니다. 여기에서 프로젝트의 Javascript, Css 및 HTML 부분을 사용할 수 있습니다.
나머지는 캔버스를 호스팅하는 div 내에 구축됩니다.
원하는 항목 수, 마우스 오버, 클릭 시 상호 작용 및 항목이 이러한 이벤트에 반응해야 하는 방식과 관련된 모든 설정을 지정할 수 있습니다.



파티클은 완벽하게 사용자 정의할 수 있으며 캔버스의 베이스도 간단한 CSS 또는 배경 이미지와 함께 사용할 수 있습니다.
기본 입자인 NASA, Bubble, Snow, Nyan Cat을 제공하는 드롭다운에서 입자 유형을 선택할 수 있습니다.

Particle.Js는 현재 24,899개의 별(내 포함!), 282개의 문제 및 4,400개의 포크를 보유하고 있으며 MIT에서 라이선스를 받았습니다.

1) HTML 파일에 CDN library을 포함하고

<div id="particles-js"></div>

당신에게 HTML 콘텐츠를 잡아

2) 페이지 도구https://vincentgarreau.com/particles.js/를 사용하여 사용자 지정 입자 캔버스를 만듭니다.

3) 우측 상단의 Codepen 버튼을 이용하여 Codepen에 게시

4) 사용자 지정 JavaScript 파일에서 해당 Codepen 결과를 복사합니다(CSS와 동일).

내 데모는 Codepen 및 GitHub에서 찾을 수 있습니다.

이 라이브러리의 유일한 결점은 더 이상 유지 관리되지 않는다는 것입니다😢. 하지만 기다려주세요! 멋진 솔루션이 있습니다 😎 ❤️ !!

tsParticle.js

tsParticle.js은 Particle.js와 매우 유사한 구현을 포함하는 라이브러리입니다(따라서 이전 버전과 크게 다르지 않거나 복잡하지 않습니다. 정말!!).
그리고 MIT 라이선스로 출시되었고... 역시 멋져요 ✅!



구현 방법을 이해하기 위해 Github에 대한 아름다운 문서가 있습니다.

Matteo는 다음과 같이 썼습니다.

[...]I’ll show you some reasons to replace particles.js with the new tsParticles.

1. tsParticles are fully compatible with the particles.js configuration. Seriously, you just need to change the script source et-voilà you're ready.

2. tsParticles have a frame per second (fps) limiter, so they don’t let the CPU client suffer more than necessary.

3. tsParticles have a lot of new features.

4. tsParticles development is active. [...]

Codepen에서 tsParticles에 대한 몇 가지 훌륭한 예를 찾을 수 있습니다. 잠재력에 대한 아이디어를 제공하고 Vue, React 및 Angular로 구현할 수 있습니다. Wordpress의 경우 플러그인이 없지만 Elementor용 프리미엄 애드온을 통해 tsParticle을 사용할 수 있습니다(Premium Particles Add.on 섹션에서).

여러분도 tsParticle.Js와 함께 즐거운 시간을 보내시고 여러분의 프로젝트를 위한 아름다운 패턴을 만드시길 바랍니다!😊 😊