Creating Liquid Effect on Image and Color Effect On Mouse Using Javascript | LiquidEffect.js

Liquid Effect is a Javascript library to create a liquid image effect and RGB effect on mouse orientation. LiquidEffect.js that makes use of the pixi.js library to apply fluid and fanciful glitch effect to images.

How to make use of it:

1. Load the required pixi.js and pixi-filters libraries on the HTML web page.

<script src="https://cdn.jsdelivr.net/npm/pixi.js/dist/pixi.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pixi-filters/dist/pixi-filters.js"></script>

2. Load the LiquidEffect.js after pixi.js library.

<script src="LiquidEffect.js"></script>

3. Create a container to hold the picture.

<div id="example"></div>

4. Initialize the LiquidEffect and decide the path to the target and displacement pictures.

new LiquidEffect({
    appendTo: "#example",
    image: 'image.jpg',
    displacementImage: "displacement_map.jpg"
});

5. Config the Liquid & Glitch Effects with the next props.

new LiquidEffect({
    appendTo: "#example",
    image: 'image.jpg',
    displacementImage: "displacement_map.jpg",
    displacementScale: 1,
    speed: 1, 
    intensityX: 1.5,
    intensityY: 1.5,
});

Liquid & Glitch Effects For Images, Liquid Effect Plugin/Github

See Demo And Download