HTML elements

Styles and functions.

<link rel="stylesheet" href="particles.css"> <script type="text/javascript" src="particles.js"></script>

Main elements where global effects are spawned. Place this code at the end of your HTML file.

<div class="globalEffectsFilter"> <div class="effectsContainer" id="effectsFilterLight"> <div id="globalFireworksArea"></div> <div id="mouseClickEffect1"></div> </div> </div>

Resources

CSS file JS file ZIP images ZIP sounds

Documentation

• The elements style you use to spawn the particles on needs to have position:relative;
• Custom particle images are fully compatible and can be set from the function variable particleImg.
• Some effects can play sounds. Change playSound value to a different one to mute the effect.
• You can change the imagesRoute and soundsRoute Javascript variables to your custom folders routes.

HTML triggers

Hit

<button onclick="mouseHit1()">Hit</button>

Wave

<button onclick="mouseClickEffect1()">Wave</button>

Default

elementId, particleImg, particleNum, minSize, maxSize, particleForce, particleAngle, hueVariation, allowRotation, blendMode

<button id="particlesLauncher" onclick="createParticles('particlesLauncher', 'glow_orange', 32, 80, 60, 200, 360, 360, false, 'overlay')">Particles</button>

Conffeti

elementId, soundMode, force, degrees

<button id="confettiLauncher" onclick="createConfetti('confettiLauncher', 'playSound', 300, 360)">Confetti</button>

Explosion

elementId, fireSprite, fireSize, fireScale, smokeParticlesNum, smokeForce

<button id="explosionButton" onclick="createExplosion(elementId, '02', 200, 1.4, 12, 340)">Explosion</button>

Fireworks

elementId, fireworksNumber, timerMin, timerMax, maxParticles, forceParticles, customColorRGB

<button onclick="loadFireworks('globalFireworksArea', 3, 100, 300, 200, 300, null)">Fireworks</button>

Snow / Rain

nameId, elementId, particleImg, particleNum, fallDuration, windForce, size

<button onclick="createSnow('snow1', 'effectsFilterLight', 'snowflake_1', 5, 6, 50, 16)">Snow</button>

CSS

CSS file

Javascript

JS file