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

Liquid-Effect-on-Image

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

Official Website(rohail6259): Click Here

This superior jQuery/javascript plugin is developed by rohail6259. For extra Advanced Usages, please go to the official website.