查看: 619|回复: 4

[HTML5动画] 基于WebGL的超逼真仿透明液体流动变形效果教程

[复制链接]
发表于 2019-7-31 11:08:52 | 显示全部楼层 |阅读模式



简要教程


这是一款基于WebGL的超逼真液体流动变形效果。该效果使用PixiJS和GSAP来制作,以轮播图的方式来展现不同类型的液体流动变形效果。液体流动变形效果共5组,非常逼真。

使用方法


在页面中引入下面的文件。

  1. <script src="js/demo.js"></script>
  2.         <script src="js/pixi.min.js"></script>
  3.         <script src="js/TweenMax.min.js"></script>
  4.         <script src="js/main.js"></script>
  5.         <script src="js/imagesloaded.pkgd.min.js"></script>
复制代码
javascript


javascript代码

  1. <script>
  2.                 imagesLoaded(document.body, () => document.body.classList.remove('loading'));
  3.                 var spriteImages         = document.querySelectorAll( '.slide-item__image' );
  4.                 var spriteImagesSrc = [];
  5.                 for ( var i = 0; i < spriteImages.length; i++ ) {
  6.                         var img = spriteImages[i];
  7.                         spriteImagesSrc.push( img.getAttribute('src' ) );
  8.                 }

  9.                 var initcanvasSlideshow = new CanvasSlideshow({
  10.                         sprites: spriteImagesSrc,
  11.                         displacementImage: 'img/dmaps/2048x2048/clouds.jpg',
  12.                         autoPlay: true,
  13.                         autoPlaySpeed: [10, 3],
  14.                         displaceScale: [200, 70]
  15.                 });
  16.         </script>
复制代码
该液体流动变形效果的github地址为:https://github.com/codrops/LiquidDistortion/

源码下载

游客,如果您要下载源码或者查看隐藏内容请回复

回复

使用道具 举报

发表于 2019-7-31 14:09:55 | 显示全部楼层
回复 支持 反对

使用道具 举报

发表于 2019-7-31 15:41:53 | 显示全部楼层
:D:D:D:D:D:D:D:D:D:D:D:D:D:D:D:D:D:D:D:D:D:D:D:D:D:D:D:D:D
回复 支持 反对

使用道具 举报

发表于 2019-8-2 16:55:46 手机频道 | 显示全部楼层
这个效果很牛XXXX
回复 支持 反对

使用道具 举报

发表于 2019-8-9 10:06:09 | 显示全部楼层
这个效果不错,源码怎么下载
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

关闭

网站推荐上一条 /1 下一条



邮箱:[email protected] QQ:791577401 木子牛HTML5工作室 版权所有

© MUZINIU Inc.小黑屋|手机版|Archiver|HANGNIU  

Powered by MuZiNiuX3.2( 豫ICP备12017936号 )

 豫公网安备 41078102000103号

快速回复 返回顶部 返回列表