Javascript library to generate an infinite stream or a burst of image based particles on HTML canvas.

Overview

spxparticles

Stream or a burst of image particles on HTML canvas

Simple Javascript library for generating an infinine stream or a burst of image based particles on a HTML canvas. Only visible particles remain in memory to manage memory usage and browser performance.

Please note: GIF animations on this page are running at low frame rate and does not make justice to an actual animation.

Usage

<script type="text/javascript" src="js/spxparticles.js"></script>
<script>
    window.addEventListener('DOMContentLoaded',(e) => {
    spawnSPXParticles('SPX_ParticleCanvas');
    });
</script>
<canvas id="SPX_ParticleCanvas"></canvas>

spxparticles screenshots

Example configuration #1:

var spxParticleSettings = {
    p_texture     :  '../img/fb-haha.png', 
    p_blending    :  'color-dodge',   /* (empty), screen, overlay, multiply, color-dodge... */
    emit_delay    :  30,              /* Delay between each new particle (performance warn!)  */
    emit_left     :  10,              /* Emitter zone left % */
    emit_right    :  90,              /* Emitter zone right % */
    emit_top      :  80,              /* Emitter zone top % */
    emit_bottom   :  90,              /* Emitter zone bottom % */
    zone_visible  :  false,           /* Preview emitter zone on canvas */
    gravity       :  -4,              /* Y move speed (negative: up) */
    rnd_grav_mult :  2,               /* Random speed multiplier */
    spread_x      :  0.5,             /* Dispersion value */
    wind          :  2,               /* Horizontal push force */
    wave_size     :  1,               /* Size of wavy motion */
    wave_freq     :  80,              /* Speed of wavy motion */
    p_life        :  250,             /* Maximum particle lifespan duration */
    p_rnd_life    :  20,              /* Randomize lifespan */
    p_size        :  110,             /* Particle born size in pixels */
    p_rnd_size    :  80,              /* Randomize size */
    p_size_mult   :  0.98,            /* Size multiplier, scale down/up gradually */
    p_rotation    :  0,               /* Spawn rotation (deg) */
    p_rnd_rot     :  15,              /* Randomize rotation (deg) */
    p_rot_wobble  :  true,            /* wobble back and forth? */
    p_rot_amount  :  1.2,             /* Rotation speed */
    p_rot_wofreq  :  40,              /* Wobble frequency */
    p_rot_dual    :  false,           /* both directions CW and CCW */ 
    p_opacity     :  100,             /* Opacity of a particle when born (%) */
    p_rnd_opa     :  0,               /* Randomize born opacity (%) */
    p_opa_mult    :  0.8,             /* Opacity multiplier, fade gradually */
    p_fade_start  :  150,             /* When do we start to fade out */
    p_rnd_fstart  :  20               /* Randomize fade start age */
};

Demos:

spxparticles screenshots

Demo 1 (index.html) : smiley faces rising up

Demo 2 (demo-2.html) : stars falling downwards, emitter zone visible

Demo 3 (demo-3.html): disco flashing lights

Demo 4 (demo-4.html): click handler to emit few particles

Demo 5 (demo-5.html): smoke drifting from left to right

You might also like...

Pure CSS Image Hover Effect Library

imagehover.css A Scaleable & Light Image Hover CSS Library Imagehover.css is a lovingly crafted CSS library allowing you to easily implement scaleable

Dec 21, 2022

Background image segment effect as seen on [Filippo Bello's Portfolio](http://www.filippobello.com/portfolio).

Segment Effect Background image segment effect as seen on Filippo Bello's Portfolio. Article on Codrops Demo License Integrate or build upon it for fr

Nov 29, 2022

Switch the background-image with using effect.

jQuery.BgSwitcher Switch the background image with using effect. Demo http://rewish.github.io/jquery-bgswitcher/ Usage div class="box" pLorem ip

Dec 30, 2022

A set of effects for mouse-following image trails that show a random series of images.

A set of effects for mouse-following image trails that show a random series of images.

Image Trail Effects A set of effects for mouse-following image trails that show a random series of images. Inspired by the effect seen on VLNC Studio.

Dec 28, 2022

A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to create a subtle motion or depth effect.

Image Tilt Effect A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to c

Nov 21, 2022

A sticky image effect for a slideshow inspired by ultanoir's website.

A sticky image effect for a slideshow inspired by ultanoir's website.

How to Create a Sticky Image Effect with Three.js A sticky image effect for a slideshow inspired by ultanoir's project showcase slideshow. Article on

Nov 18, 2022

A full image reveal effect with fancy thumbnail sliding.

A full image reveal effect with fancy thumbnail sliding.

Full Image Reveal Effect A full image reveal effect with fancy thumbnail sliding. Article on Codrops Demo Credits Images from Unsplash.com TweenMax by

Dec 19, 2022

image/video/content slideshow engine providing high quality animation effects including Kenburns Effect and GLSL Transitions.

image/video/content slideshow engine providing high quality animation effects including Kenburns Effect and GLSL Transitions.

Diaporama Diaporama is an image/video/content slideshow engine providing high quality animation effects including Kenburns effect and GLSL Transitions

Nov 26, 2022

KenBurns Image Effect for React Native Applications

react-native-kenburns-view KenBurns Image Effect for React Native. Based on Image Component Image Component. Version: 4.1.0 Tested on React Native 0.6

Sep 3, 2022
Owner
Tuomo Kulomaa
Creative Director who also does stuff. Founder of SPX Graphics.
Tuomo Kulomaa
Lightweight, High Performance Particles in Canvas

Sparticles https://sparticlesjs.dev Lightweight, High Performance Particles in Canvas. For those occasions when you ?? just ?? gotta ?? have ?? sparkl

Simon Goellner 171 Dec 29, 2022
A little library that can be used for bursting particles effects on buttons and other elements

Particle Effects for Buttons Bursting particles effects for buttons. By Luis Manuel. Article on Codrops Demo Credits anime.js Basic usage The Particle

Codrops 1.2k Jan 1, 2023
React particles animation background component

particles-bg React component for particles backgrounds This project refers to the source code of the Proton official website, I packaged it into a com

lindelof 561 Dec 24, 2022
A vue.js particles animation background component

particles-bg-vue A vue.js particles animation background component. Use it to make your website look cool. Check it out if you want to use it in React

lindelof 206 Dec 24, 2022
A bursting particles effects buttons component ✨💥❄️🌋

vue-particle-effect-buttons (demo) Bursting particle effect buttons for Vue. This library is a Vue portal of an awesome Codrops Article by Luis Manuel

Vincent Guo 252 Nov 11, 2022
A vanishing effect for particles and magic lovers using Threejs, GSAP and custom shaders.

Three.js Experiment - Vanishing Suzanne Demo version Get started First, you need nodejs on your computer to build the assets. Install dependencies: np

Arno Di Nunzio 120 Dec 23, 2022
Warp drive is a lightweight jQuery plugin that helps you create a cool, interactive, configurable, HTML5 canvas based warp drive/starfield effect.

Warp drive jQuery plugin (jquery-warpdrive-plugin) Preview Description Warp drive is a lightweight jQuery plugin that helps you create a cool, interac

Niklas 51 Nov 15, 2022
A lightweight, efficient and easy-to-use Canvas library for building some cool particle effects.

JParticles · 中文 | English 官网:jparticles.js.org 特效列表 粒子运动 波纹运动 波纹进度条 雪花飘落 线条动画 介绍 JParticles(JavaScript Particles 的缩写)是一款基于 Canvas 的不依赖于其他库的轻量级 JavaScr

花祁 466 Dec 27, 2022
Liquideffect - Javascript Library for creating liquid effect on image and RGB effect on mouse direction.

LiquidEffect Javascript Library for creating liquid effect on image and RGB effect on mouse direction. Demo https://liquideffect.netlify.app/ Dependen

Rohail 8 May 6, 2022
Add a retro/vintage effect to images using the HTML5 canvas element

vintageJS Add a retro/vintage effect to images using the HTML5 canvas element. Installation $ npm install vintagejs How to use vintagejs is a functio

Robert Fleischmann 829 Dec 25, 2022