Liquid Distortion background with javascript

Liquid Distortion background is a vision effects in WebGL powered by PixiJS and GSAP. By Yannis Yannakopoulos.

There is a slides version with liquid distortion here 
codrops article here

step1:
html

html

css

js

// Select all your images
var spriteImages = document.querySelectorAll( '.slide-item__image' );
var spriteImagesSrc = [];
var texts = [];
for ( var i = 0; i < spriteImages.length; i++ ) {
var img = spriteImages[i];
// Set the texts you want to display to each slide
// in a sibling element of your image and edit accordingly
if ( img.nextElementSibling ) {
texts.push(img.nextElementSibling.innerHTML);
} else {
texts.push('');
}
spriteImagesSrc.push( img.getAttribute('src' ) );
}
// Initialise the Slideshow
var initCanvasSlideshow = new CanvasSlideshow({
// pass the images you want as an array
sprites: spriteImagesSrc,
// if you want your slides to have title texts, pass them as an array
texts: texts,
// set your displacement texture
displacementImage: 'https://imgur.com/a/Ea3wo',
// optionally start with a default animation
autoPlay: true,
// [x, y] controls the speed for your default animation
autoPlaySpeed: [10, 3],
// [x, y] controls the effect amount during transitions
displaceScale: [200, 70],
// choose whether or not you slideshow will take up all the space of the viewport
fullScreen: true,
// If you choose to not have a fullscreen slideshow, set the stage's width & height accordingly
stageWidth: 800,
stageHeight: 600,
// add you navigation element. Should have a 'data-nav' attribute with a value of next/previous
navElement: document.querySelectorAll( '.scene-nav' ),
// will fit the filter bounding box to the renderer
displaceAutoFit: false
});

main.js

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

delete some slides from Lou's version.


step2:

Link the css and js files:

step3:
css

step4:
js

The rendering part doesn't fit the screen, so I change the translate in main.js file.

When I test at Chrome,it will show the iamges are not allowed access at console.

Regular web pages can use the XMLHttpRequest object to send and receive data from remote servers, but they're limited by the same origin policy. Extensions aren't so limited. An extension can talk to remote servers outside of its origin, as long as it first requests cross-origin permissions.

I figure it out with second way,just for testing.

In Windows, paste this command in run window