Apply Fancy Pixel Particle Animations To Images – Pict2Pix.js

Category: Animation , Image , Javascript | July 16, 2021
Author: evaristocuesta
Views Total: 39 views
Official Page: Go to website
Last Update: July 16, 2021
License: MIT

Preview:

Apply Fancy Pixel Particle Animations To Images – Pict2Pix.js

Description:

Pict2Pix.js is a JavaScript library that adds fancy pixel particle animations to images using Canvas API.

How to use it:

1. Import the minified version of the Pict2Pix.js library into the document.

<script src="/dist/pict2pix.min.js"></script>

2. Initialize the library on the target image and done.

<img id="image-demo" src="demo.jpg" />
const imageDemo = document.getElementById('image-demo');
window.onload = function initialize() {
  pict2pix.animate({
    image: imageDemo
  });
}

3. Specify the particle type. Can be either ‘straight-particle’ or ‘twisted-particle’.

pict2pix.animate({
  image: imageDemo,
  particleType: 'twisted-particle',
});

4. Specify the number of particles to generate. Default: 3000.

pict2pix.animate({
  image: imageDemo,
  numberOfParticles: 500,
});

5. Config the animation speed. Default: 1.

pict2pix.animate({
  image: imageDemo,
  horizontalSpeed: 1,
  verticalSpeed: 1,
});

You Might Be Interested In:


Leave a Reply