CSS와 JavaScript가있는 파티클

Question

아주 간단한 입자 시스템과 같은 것을 만들려고합니다. 이 시점에서 물리학은 필요하지 않습니다. 거품이나 꿀벌처럼 보이도록 움직이는 div 만 있으면됩니다. 아래의 코드는 div를 만들고 CSS를 통해 위치를 변경하고 위쪽으로 떠있게 할 수 있습니다. 그러나 입자를 파괴하는 방법을 연습 할 수는 없습니다. 각 입자는 모션을 수행 한 다음 다시 원래 위치로 돌아갑니다. 완전히 제거 된 경우 선호합니다.

감사합니다.

/* ==================== PARTICLES CONTROLLER ==================== */ 

/** 
* Particle controller interates through all elements with 
* CSS class name PARTICLE_CSS and when found a ParticleController is instantiated 
* for each of the elements. 
*/ 

function ParticleBaseController(){ 
    var ParticleContainer = document.querySelectorAll(PARTICLE_CSS), 
     ParticleContainerLength = ParticleContainer.length; 

    for (var i = ParticleContainerLength - 1; i >= 0; i--){ 
    new ParticleController(ParticleContainer[i]); 
    }; 
}; 

function ParticleController(element) { 
    var particleElement, fragment = document.createDocumentFragment(); 
    var numberOfParticles = 1; 

    for (var i = 0; i < numberOfParticles; i ++) { 
    particleElement = document.createElement("div"); 
     particleElement.addClassName(PARTICLE_ELEMENT_CSS_CLASS); 
    var Ypos = Math.floor((Math.random()*200)+1); 
    var Xpos = Math.floor((Math.random()*200)+1); 
    particleElement.style.top = Ypos + "px"; 
    particleElement.style.left = Xpos + "px"; 
    fragment.appendChild(particleElement); 
    } 
    element.appendChild(fragment); 

setTimeout(ParticleBaseController, 3000); 
}; 

Answer 1

이것은 나를 위해 일했습니다. 나는 그것이 작동하는 방식은 입자가 단지 15 미만인 한 컨테이너에 추가된다는 것입니다.하지만 실제로 어떻게 파괴되는지는 알지 못합니다. 그러나 화면에서는 한 번에 15 개의 입자 만 볼 수 있습니다. 그런 다음 많은 수를 설정합니다.

/* ==================== PARTICLES CONTROLLER ==================== */ 
    const NumberOfParticles = 15; 

function smoking() 
{ 
    var container = document.getElementById('particleContainer'); 
    for (var i = 0; i < NumberOfParticles; i++) 
    { 
     container.appendChild(createParticle()); 
    } 
} 

function randomFloat(low, high) 
{ 
    return low + Math.random() * (high - low); 
} 

function createParticle() 
{ 
    var particleDiv = document.createElement('div'); 
    particleDiv.style.top = "-300px"; 
    particleDiv.style.left = "200px" 

    particleDiv.style.webkitAnimationName = 'smoke-rise, smoke-fade'; 

    var SmokeDuration = randomFloat(5, 10)+"s"; 
    var FadeDuration = randomFloat(4, 11)+"s"; 
    var SmokeDelay = randomFloat(0, 5)+"s"; 
    var FadeDelay = randomFloat(2, 9)+"s"; 

    particleDiv.style.webkitAnimationDuration = SmokeDuration + ', ' + FadeDuration;  
    particleDiv.style.webkitAnimationDelay = SmokeDelay + ', ' + FadeDelay; 

    return particleDiv; 
} 

window.addEventListener("DOMContentLoaded", smoking, false);