일부 배경은 가만히 앉아 있고,일부는 표류합니다. 얇은 선으로 연결된 떠다니는 점,또는 헤드라인 뒤에 떨어지는 눈: 입자 효과는 비디오 파일이 보이지 않는 섹션 조용한 모션을 제공합니다. 무료 입자 확장 에서 Elementor용 마스터 애드온 잘 알려진 particles.js 라이브러리에 의해 구동되고 단일 JSON 필드로 구성된 콘텐츠 뒤에 있는 것을 정확하게 렌더링합니다.
게시된 페이지에서 Snow 사전 설정을 실행하는 데모 섹션은 다음과 같습니다:
Particles 확장이 하는 일 #
활성화되면 섹션, 열 및 컨테이너는 다음을 얻습니다 입자 패널 스타일 탭. 뒤집다 입자 배경을 활성화합니다 예에 섹션 배경은 라이브 파티클 캔버스가됩니다. 패널은 최소로 유지합니다:
- 입자 배경 활성화: 효과를 위한 온/오프 스위치.
- Z-지수: 입자층이 스택에 위치하여 내용물 뒤에 유지됩니다.
- 입자 JSON: particles.js 구성을 유지하는 코드 필드: 입자 수, 색상, 모양, 크기, 연결 선, 이동 속도 및 호버 상호 작용이 모두 여기에 있습니다.
기본 구성은 상자 안에 배송되고, 흰색 점은 미묘한 선 네트워크로 연결되며, 패널은 자신의 건물을위한 particles.js 생성기에 바로 연결됩니다.
시작하기 전에 #
- 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
- Elementor용 마스터 애드온 설치 및 활성. 플러그인에 새로운? 따라 설치 가이드 첫번째.
- 파티클은 무료 확장기능이므로 Pro 라이센스가 필요하지 않습니다.
- 코딩 필요 없음: JSON은 포인트 앤 클릭 생성기에서 제공됩니다.
Particles 확장을 활성화하는 방법 #
WordPress 대시보드에서 다음으로 이동하세요 마스터 애드온 그리고 열어보세요 확장 탭. 입자는 에 위치합니다 애니메이션 위젯 인기 배지가 있는 그룹, 부동 효과 옆 애니메이션 그라데이션 BG. 보라색으로 변하도록 토글을 클릭한 다음 누르세요 변경 사항 저장 그리고 녹색 “설정이 성공적으로 저장되었습니다” 공지를 기다리십시오.
섹션에서 입자 패널을 찾으세요 #
Elementor 편집기에서 컨테이너 또는 섹션을 선택하고 을 엽니다 스타일 탭. 그만큼 입자 보라색 MA 배지가 있는 섹션은 다른 Master Addon 배경 도구와 함께 제공됩니다: 애니메이션 그라데이션 배경, 배경 슬라이더및 패턴.
켜고 기본 효과를 충족합니다 #
입자를 확장하고 전환합니다 입자 배경을 활성화합니다 예. 캔버스는 즉시 기본 구성을 실행합니다: 섹션을 가로 질러 표류하는 흰색 점,가는 선으로 움직이는 네트워크로 연결됩니다. The 입자 JSON 아래 필드에는 이를 구동하는 구성이 포함되어 있습니다 Z-지수 텍스트 뒤에 레이어를 유지합니다.
입자.js 생성기에서 사전 설정을 가져옵니다 #
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 여기를 클릭하세요 JSON 필드 위의 링크는 particles.js 데모 사이트, 사전 설정된 구성의 라이브 생성기를 엽니다: 기본값, NASA, Bubble, Snow 및 Nyan Cat. 하나를 선택하고,원한다면 슬라이더를 튜닝하고,히트하십시오 현재 구성 다운로드 (json).
다운로드한 파일을 열고 JSON 을 복사한 후 Particle JSON 필드에 붙여 넣습니다. 데모는 Snow 사전 설정과 함께 진행되며,컨버스는 선 네트워크에서 구성이 착지하는 순간 섹션 위로 떨어지는 부드러운 흰색 조각으로 전환됩니다.
페이지의 결과 #
게시하고 섹션은이 페이지의 상단에있는 GIF 에서와 같이,그 자체로 눈이. 입자는 콘텐츠 뒤에 캔버스에 렌더링,그래서 배경이 계속 이동하는 동안 상단에있는 모든 것이 선명하게 유지. 기본 구성도 커서에 반응; 표준 네트워크 효과는 호버에 입자를 격퇴.
실용적인 참고 사항 하나: 입자 수는 성능을 높입니다. Snow 사전 설정은 400 개의 입자를 실행하고 부드럽게 유지되지만 페이지에 여러 입자 섹션이 쌓이면 카운트를 적당히 유지하고 중급 전화로 확인하십시오.
입자 배경이 맞는 곳 #
- 영웅 섹션. 연결된 점 네트워크는 굵은 헤드라인 뒤에 기술과 현대성을 읽습니다.
- 계절 캠페인. Snow 사전 설정은 프로모션 섹션의 겨울을 하나의 페이스트로 만들어줍니다.
- SaaS 및 시작 페이지. 천천히 표류하는 입자는 피치에서 산만해지지 않고 깊이를 더합니다.
- 어두운 섹션. NASA와 같은 스타 필드 구성은 어두운 배경이 의도적인 것처럼 느껴지도록 만듭니다.
- 이벤트 및 시작 페이지. 카운트다운 뒤에 있는 동작은 희박한 페이지를 계속 유지합니다.
비디오 자습서 #
게시된 페이지에 눈이 내리는 것까지 확장 기능 활성화부터 전체 설정을 시청하세요.
자주 묻는 질문 #
Elementor 에서 파티클 배경을 어떻게 추가하나요?
마스터 애드온 확장 탭에서 파티클 확장을 활성화하고 섹션을 선택한 후 스타일 탭에서 파티클을 엽니다. 파티클 배경 활성화를 예 로 전환하면 기본 애니메이션 네트워크가 즉시 나타나며 구성이 필요하지 않습니다.
다른 입자 효과는 어디서 얻나요?
패널의 Click here 링크는 NASA,Bubble, Snow,Nyan Cat 과 같은 사전 설정이 있는 particles.js 생성기를 엽니다. 설정을 실시간으로 조정하고 구성을 JSON 으로 다운로드한 후 Particle JSON 필드에 붙여넣습니다.
입자가 페이지 속도를 늦추나요?
효과는 가벼운 캔버스에서 실행되며 일반적인 카운트에서 부드럽게 유지됩니다; Snow 데모는 400 개의 입자를 더듬지 않고 실행합니다. 카운트를 합리적으로 유지하고 특히 모바일 방문자의 경우 한 페이지에 많은 입자 섹션을 쌓지 마십시오.
입자가 마우스에 반응할 수 있나요?
예. particles.js config 에는 상호 작용 설정이 포함되어 있으며 기본 구성은 커서가 섹션 위로 이동할 때 파티클을 밀어냅니다. 호버 및 클릭 동작은 모두 JSON 에서 구성할 수 있습니다.
Particles 확장자는 무료인가요?
예. 파티클은 확장 탭의 애니메이션 위젯 그룹에서 Elementor 용 Master Addons 무료 버전과 함께 제공됩니다. 가격 페이지는 Pro 플랜이 추가하는 내용을 다룹니다.
감싸는 #
Particles 확장은 어떤 Elementor 섹션 뒤에 라이브 파티클 캔버스를 넣습니다: 기본 네트워크에 대한 하나의 토글,particles.js 생성기가 꿈꿀 수있는 모든 것에 대해 하나의 붙여 넣은 JSON. 카운트를 정상으로 유지하고 Z-index 가 콘텐츠 뒤에 레이어를 유지하도록하면 섹션은 단일 자산 업로드없이 자연스럽게 옆에 앉습니다 애니메이션 그라데이션 배경 그리고 배경 슬라이더 동일한 스타일 탭의 확장 및 전체 세트 마스터 애드온 위젯 및 확장 는 한 페이지 떨어져 있습니다. particles.js 를 손으로 추가하는 것과 비교하려면,를 참조하십시오 입자 확장 페이지.
