JavaScript 프로젝트에서 Particle.js를 어떻게 사용하나요?

이름에서 알 수 있듯이 Particle.js 라이브러리를 사용하면 특정 HTML 요소에 입자를 추가할 수 있습니다. 또한 div에 있는 입자의 모양 수를 변경할 수 있습니다.

Particle.js 라이브러리를 사용하여 입자에 애니메이션이나 모션을 추가할 수 있습니다. 여기에서는 다양한 예를 통해 입자의 모양, 색상 및 움직임을 변경하는 방법을 배웁니다.

문법

사용자는 다음 구문에 따라 JavaScript 프로젝트에서 Particle.js 라이브러리를 사용할 수 있습니다.

으아악

위 구문에서 id는 파티클을 추가해야 하는 div 요소의 ID를 나타냅니다.

예

아래 예에서는 Particles.JS 라이브러리를 사용하고

태그에 CDN을 사용하고 있습니다. 요소를 생성하고 HTML 본문에 ID를 할당했습니다.

JavaScript에서는 파티클을 로드하기 위해 tsarticles.load() 메서드를 추가했습니다. load() 메소드의 첫 번째 매개변수로 div 요소의 ID를 전달합니다. 이 객체를 입자 속성을 포함하는 두 번째 매개변수로 전달합니다.

으아악

출력에서 사용자는 div 요소 내부의 입자를 관찰할 수 있습니다.

예

아래 예에서는 입자에 모션과 색상을 추가합니다. 사용자는 이동 속성을 사용하여 입자를 이동할 수 있습니다. "이동" 속성은 부울 값이 있는 활성화된 속성을 포함하는 개체로 값을 사용합니다.

으아악

사용자는 색상 속성을 사용하여 이 개체를 값으로 포함하는 입자의 색상을 변경할 수 있습니다.

사용자는 Particle.JS 라이브러리에서 다음과 같은 모양의 입자를 사용할 수 있습니다.

>

• "다각형"

• "삼각형"

• "서클"

• "가장자리"/"사각형"

• "이미지"/"이미지"

• "별"

• "캐릭터"/"캐릭터"

예

아래 예에서는 입자에 다각형 모양을 추가했습니다. 또한 크기 속성을 사용하여 입자의 크기를 변경했습니다. 또한 입자 자체에 애니메이션을 추가하여 사용자가 출력에서 관찰할 수 있는 입자의 크기를 늘리거나 줄였습니다.

으아악

사용자는 JavaScript 프로젝트에서 키워드.js 라이브러리를 사용하는 방법을 배웠습니다. 그러나 사용자는 로컬 컴퓨터에 Particle.js 라이브러리를 설치하고 경로를 사용하여 가져올 수 있습니다. 사용자가 NodeJS 애플리케이션과 함께 Particle.js 라이브러리를 사용하려고 할 때마다 NPM 명령을 사용하여 이를 설치해야 합니다.

위 내용은 JavaScript 프로젝트에서 Particle.js를 어떻게 사용하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!