专栏首页蚂蚁开源社区基于WebGL的超逼真仿透明液体流动变形效果教程

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

简要教程


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


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

<script src="js/demo.js"></script> 
<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>

javascript


javascript代码

<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>

该液体流动变形效果的github地址为:https://github.com/codrops/LiquidDistortion/

阅读原文-演示/下载源码,还有更多更好玩的开源代码等你哦!

本文分享自微信公众号 - 蚂蚁开源社区(mayi_zzfriend)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-07-31

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【开源游戏/射击】愤怒的小红帽

    HTML5愤怒的小红帽小游戏是一款益智休闲射击小游戏,游戏中一支箭,一个便当袋,小红帽能平安的到达老奶奶家吗?赶紧一起护送小红帽去奶奶家吧。完成这个神圣的任务,...

    用户5997198
  • 【开源游戏/测试游戏】指纹测缘分!

    你想知道属于你的缘分么,现在玩家可以通过指纹测试出属于自己的缘分,赶快行动起来吧,游戏中,玩家只需要鼠标长按指纹,就可以很快的分析出属于你的缘分结果,你还在等什...

    用户5997198
  • 【开源游戏/休闲益智】找您妹!

    在各类物品中精准锁定目标,既需要眼力也需要专注,双人眼力大比拼,3局2胜看谁更快找到所有物品。眼力不好怎么找对象!快来和你的小伙伴比拼一下眼力吧!

    用户5997198
  • 解决innerHTML插入js不运行问题

    有两个功能, 一个是可以获取指定DOM的HTML元素, 另一个就是替换指定DOM的HTML元素

    治电小白菜
  • 【技术创作101训练营】innerHTML插入运行js字符串问题探究

    有两个功能, 一个是可以获取指定DOM的HTML元素, 另一个就是替换指定DOM的HTML元素

    治电小白菜
  • Click fireworks

    将下方代码添加到 你当前使用主题的index.ejs 即可加入到首页,我推荐只将其加入到首页,文章页 尽量保持简洁。

    BORBER
  • 强大的jQuery图片查看器插件使用教程

    Youngxj
  • 移动端minimvvm框架qvm实现

    gitHub地址 1,移动端minimvvm框架qvm实现 qvm概念,一个适用于移动端的mini mvvm(什么是mvvm?没了解的同学自己去了解)框架。参考...

    IMWeb前端团队
  • 移动端minimvvm框架qvm实现

    qvm概念,一个适用于移动端的mini mvvm(什么是mvvm?没了解的同学自己去了解)框架。参考了angular和vuejs的设计实现思路,并进行简化封装,...

    IMWeb前端团队
  • 那些延时加载图片的开源插件

    图片延时加载技术对大流量的网站来说是十分实用的。目前图片在网站中大量使用,如果不加处理的话会对服务器和带宽造成级大压力,通过只渲染当前用户可见区域的图片,可以极...

    疯狂的技术宅

扫码关注云+社区

领取腾讯云代金券