html5基于Pixi.JS和WebGL图片液体流动变形动画效果

几款酷炫的基于Pixi.JS和WebGL制作的图片液体流动变形动画效果，html5 canvas全屏的图片液体变形动画切换特效。

分类：图片代码 > 大图切换难易：初级

查看演示下载资源下载积分： 40 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

js代码

<script src="js/pixi.min.js"></script>
		<script src="js/TweenMax.min.js"></script>
		<script src="js/main.js"></script>
		<script src="js/imagesloaded.pkgd.min.js"></script>
		<script>
			imagesLoaded(document.body, () => document.body.classList.remove('loading'));

			var spriteImages 	= document.querySelectorAll( '.slide-item__image' );
			var spriteImagesSrc = [];

			for ( var i = 0; i < spriteImages.length; i++ ) {
				var img = spriteImages[i];
				spriteImagesSrc.push( img.getAttribute('src' ) );
			}

			var initCanvasSlideshow = new CanvasSlideshow({
				sprites: spriteImagesSrc,
				displacementImage: 'img/dmaps/2048x2048/clouds.jpg',
				autoPlay: true,
				autoPlaySpeed: [10, 3],
				displaceScale: [200, 70]
			});
		</script>