codrops/liquiddistortion

A slideshow with liquid distortion effects in WebGL powered by PixiJS and GSAP

Liquid Distortion Slideshow

A slideshow with liquid distortion effects in WebGL powered by PixiJS and GSAP. By Yannis Yannakopoulos.

Article on Codrops

Demo

Credits

• PixiJS
• GSAP
• Images from Unsplash

License

This resource can be used freely if integrated or build upon in personal or commercial projects such as websites, web apps and web templates intended for sale. It is not allowed to take the resource "as-is" and sell it, redistribute, re-publish it, or sell "pluginized" versions of it. Free plugins built using this resource should have a visible mention and link to the original work. Always consider the licenses of all included libraries, scripts and images used.

Misc

Follow Yannis: Twitter

Follow Codrops: Twitter, Facebook, Google+, GitHub, Pinterest, Instagram

© Codrops 2017

liquiddistortion's Issues

Link Text

It is possible to add more than one row of text and add an anchor or a link to that text?

Unable to move for next slider automatic on certain timeout.

I have tried but failed to make slider auto scroll for next slider image.

Display video instead of img

Hi, thank you so much for this slider :)
In my project I need to put videos instead of images in the slider. I am an absolute noob in PixiJS and Canvas and all technologies this slider use.
Can you give me some help ?

Thanks again

N1

Use SVG images

Hi,

I wanted to use your plugin with an svg but it seems that's not possible. I have to define the width and height of the image and it's not what I want. Is there a solution to use a full svg file with the plugin?

Thank you by advance, best

Can this support mouse move event?

Hi, i have to come up with a request

When mouse move . the background image will effect the liquid animation around the mouse circle area.

So can you teach me an example ?

Bt the way , this repo is excellent!

fit image texture to canvas size

Hi there i'm using your slider and i'd like to create a non-fullscreen with cover-fitted images. right now I'm getting black lines at the sides of some images. I'd need this behavior to make it responsive.

Here is a link where you can find all the informations you need

Link

Text does not render

I'm trying to display text on top of the images in demo5, however I am not able to get that at all. I added texts: texts, initializing parameter texts to the array defined previously in call to var initCanvasSlideshow = new CanvasSlideshow({, however text still doesn't render. Stepping through main.js I've checked the value of the rTexts variable which is added as a child of the image and it does contain the text I am trying to display. Please help me locate where I am going wrong.