Liquideffect - Javascript Library for creating liquid effect on image and RGB effect on mouse direction.

Related tags

Effect liquideffect
Overview

LiquidEffect

Javascript Library for creating liquid effect on image and RGB effect on mouse direction.

Demo

https://liquideffect.netlify.app/

Dependencies

NPM Package

npm i pixi.js
npm i @pixi/filter-displacement
npm i @pixi/filter-rgb-split

Browser

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi-filters.js"></script>
<script src="<PATH_TO_FILE>/LiquidEffect.js"></script>

Usage

Vanilla JavaScript

<script>
    new LiquidEffect({
        appendTo: "#main",
        image: './assets/images/image.jpg',
        displacementImage: "./assets/images/displacement_map.jpg",
        displacementScale: 1,
        speed: 1,
        intensityX: 1.5,
        intensityY: 1.5,
    });
</script>

With Framework

npm i liquideffect

import LiquidEffect from 'liquideffect'

LiquidEffect({
    appendTo: "#main",
    image: './assets/images/image.jpg',
    displacementImage: "./assets/images/displacement_map.jpg",
    displacementScale: 1,
    speed: 1,
    intensityX: 1.5,
    intensityY: 1.5,
});

Parameters

Name Type Description
appendTo Dom Element Parent Element
image Image Image to display
displacementImage Image Displacement Image
displacementScale Float Displacement Scale value 0.0 - 1.0 causing waves to be shorter or bigger
speed Float Liquid effect wave speed
intensityX Float Liquid effect intensity on X-axis
intensityY Float Liquid effect intensity on Y-axis
You might also like...

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

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

A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images.

Thumbnail Grid with Expanding Preview A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Googl

Jan 4, 2023

A speedy motion transition effect for an image slideshow.

A speedy motion transition effect for an image slideshow.

Motion Transition Effect A speedy motion transition effect for an image slideshow. Inspired by Ping Pong Slow Motion. Article on Codrops Demo Credits

Jul 5, 2022

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

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

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

Dec 3, 2020

Javascript and SVG odometer effect library with motion blur

Javascript and SVG odometer effect library with motion blur

SVG library for transitioning numbers with motion blur JavaScript odometer or slot machine effect library for smoothly transitioning numbers with moti

Dec 27, 2022

Javascript library enabling magnifying glass effect on an images

Magnifier.js Javascript library enabling magnifying glass effect on an images. Demo and documentation Features: Zoom in / out functionality using mous

Dec 18, 2022

"shuffle-text" is JavaScript text effect library such as cool legacy of Flash.

ShuffleText This is the JavaScript library for text effect such as Flash contents. Setup Script Install script src="shuffle-text.js"/script NPM In

Dec 24, 2022
A mouse particle effect react component

react-mouse-particles A mouse particle effect react component A very fun react library that can be used to create mouse particle effects, which are as

lindelof 92 Dec 17, 2022
:tada: Add a cute click effect to your mouse in your vuepress!

vuepress-plugin-cursor-effects ?? Add a cute click effect to your mouse in your vuepress! Document: moefy-vuepress LiveDemo: notev Install yarn add vu

null 19 Sep 25, 2022
Demo of the tutorial on how to craft a fullscreen SVG crosshair mouse cursor with a special distortion effect on hover.

Crosshair Mouse Cursor Distortion Demo of the tutorial on how to craft a fullscreen SVG crosshair mouse cursor with a special distortion effect on hov

Codrops 33 Sep 23, 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

Codrops 571 Nov 21, 2022
⌨️ A tiny library for creating a typing effect on specified text element.

⌨️ TinyTyper - a tiny library for creating a typing effect on specified text element. Demo Size (It's really tiny) Minimized: 2.9KB Gziped: 1.1KB Inst

Korney Vasilchenko 175 Sep 29, 2021
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

Ciaran Walsh 1.8k Dec 21, 2022
Only 90's kids remember... well not really, but these beloved effects that would follow your mouse around will always be classic reminders of the old, beloved internet.

90's Cursor Effects "Knowing the codes" used to be all the rage, I want to bring a few back. A repo of the old effects that inspired creativity and th

Tim Holman 2.6k Jan 9, 2023
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

Gaëtan Renaudeau 797 Nov 26, 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

Codrops 526 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"> <p>Lorem ip

rewish 195 Dec 30, 2022