fullPage.js로 전체 화면 particle.js 설정 시도

Question

첫 번째 섹션에서는 화면 전체에 particles.js을 표시하고 싶지만, 내가하는 모든 것은 페이지의 다른 부분에 있습니다. 두 번째 섹션에 입자를 추가했습니다. 이것은 fullPage.js (Alvaro Trigo, cant는 2 개 이상의 링크를 게시합니다.)를 사용하는 것 같습니다. 나는 내 웹 사이트에 접속하고있어 누군가가 이것을 보길 원합니다. unlikemenow.github.io 고마워요 :)

Answer 1

그래서 먼저 <div> 대신 <canvas> 요소에 particles-js 클래스를 넣으십시오.

즉, 첫 번째 섹션은 이미 가지고있는 것처럼 <div class = "section">으로 감싸며 직접 자식은 <canvas class = "particles-js">입니다. <canvas>에 <canvas id = "the-particles" class = "particles-js">과 같은 고유 한 ID를 지정하십시오.

CSS의 경우 #theParticles ID에 Z-Index을 할당하십시오. 그런 다음 .section 클래스에 Z-Index을 설정하십시오. <canvas>의 Z-Index이 <div>보다 큰지 확인하십시오. 나는 이것을 직접 시험하지 않았으므로 그것이 작동하지 않는다면 알려주십시오. 나는 그것을 통해 코드화 할 수 있습니다. 나도 전에 입자 - js로 일한 적이 없지만 멋지게 보입니다!