🌜
🌞
tsparticles-preset-fountain

tsparticles-preset-fountain

v2.1.4

tsParticles fountain preset

npm install tsparticles-preset-fountain

README

banner

tsParticles Fountain Preset

jsDelivr npmjs npmjs

tsParticles preset creating random positioned falling colored particles that break when hitting the ground.

Slack Discord Telegram

tsParticles Product Hunt tsparticles fountain preset

Sample

demo

How to use it

CDN / Vanilla JS / jQuery

The first step is installing tsParticles following the instructions for vanilla javascript in the main project here

Once installed you need one more script to be included in your page (or you can download that from jsDelivr:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/tsparticles.engine.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/tsparticles.move.base.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/tsparticles.plugin.emitters.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/tsparticles.shape.circle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/tsparticles.updater.color.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/tsparticles.updater.opacity.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/tsparticles.updater.out-modes.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/tsparticles.updater.size.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/tsparticles.preset.fountain.min.js"></script>

This script MUST be placed after the tsParticles one.

Bundle

A bundled script can also be used, this will include every needed plugin needed by the preset.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/tsparticles.preset.fountain.bundle.min.js"></script>

Usage

Once the scripts are loaded you can set up tsParticles like this:

(async () => {
  await loadFountainPreset(tsParticles); // this is required only if you are not using the bundle script

  await tsParticles.load("tsparticles", {
    preset: "fountain",
  });
})();

Customization

Important ⚠️ You can override all the options defining the properties like in any standard tsParticles installation.

tsParticles.load("tsparticles", {
  particles: {
    shape: {
      type: "square", // starting from v2, this require the square shape script
    },
  },
  preset: "fountain",
});

Like in the sample above, the circles will be replaced by squares.

React.js / Preact / Inferno

The syntax for React.js, Preact and Inferno is the same.

This sample uses the class component syntax, but you can use hooks as well (if the library supports it).

import Particles from "react-particles";
import type { Engine } from "tsparticles-engine";
import { loadFountainPreset } from "tsparticles-preset-fountain";

export class ParticlesContainer extends React.PureComponent<IProps> {
  // this customizes the component tsParticles installation
  async customInit(engine: Engine): Promise<void> {
    // this adds the preset to tsParticles, you can safely use the
    await loadFountainPreset(engine);
  }

  render() {
    const options = {
      preset: "fountain",
    };

    return <Particles options={options} init={this.customInit} />;
  }
}

Vue (2.x and 3.x)

The syntax for Vue.js 2.x and 3.x is the same

<Particles id="tsparticles" :particlesInit="particlesInit" :options="particlesOptions" />
const particlesOptions = {
  preset: "fountain",
};

async function particlesInit(engine: Engine): Promise<void> {
  await loadFountainPreset(engine);
}

Angular

<ng-particles [id]="id" [options]="particlesOptions" [particlesInit]="particlesInit"></ng-particles>
const particlesOptions = {
  preset: "fountain",
};

async function particlesInit(engine: Engine): Promise<void> {
  await loadFountainPreset(engine);
}

Svelte


<Particles
        id="tsparticles"
        options={particlesOptions}
        particlesInit={particlesInit}
/>
let particlesOptions = {
  preset: "fountain",
};

let particlesInit = async (engine) => {
  await loadFountainPreset(engine);
};

General

License
MIT
Typescript Types
Built-in
Tree-shakeable
Yes

Popularity

GitHub Stargazers
4,157
Community Interest
2,895
Number of Forks
486

Maintenance

Commits
11/2110/220750
Last Commit
Open Issues
16
Closed Issues
314
Open Pull Requests
8
Closed Pull Requests
314

Versions

Versions Released
11/2110/22015
Latest Version Released
Jul 28, 2022
Current Tags
latest2.1.4
beta2.0.0-beta.5
next2.0.4
alpha2.0.0-alpha.7

Contributors

matteobruni
matteobruni
Commits: 2,835
VincentGarreau
VincentGarreau
Commits: 624
Wufe
Wufe
Commits: 198
roslaneshellanoo
roslaneshellanoo
Commits: 72
renovate-bot
renovate-bot
Commits: 59
progers
progers
Commits: 57
PieceMaker
PieceMaker
Commits: 52
code-factor
code-factor
Commits: 26
TylerBurnett
TylerBurnett
Commits: 19
Himanshunitrr
Himanshunitrr
Commits: 15
SidiBecker
SidiBecker
Commits: 13
matteoums
matteoums
Commits: 10
Enhmunh-E
Enhmunh-E
Commits: 9
gabrielbarker
gabrielbarker
Commits: 7
gaurang7goel
gaurang7goel
Commits: 6