图片/图形

WebGL的图像扭曲变形动画特效

面包多

WebGL的图像扭曲变形动画特效-创客云
这是一款基于 HTML5 WebGL 的图像扭曲变形动画特效。该特效中,通过 Three.js 来制作从一幅缩略图,扭曲变形为全屏大图的动画特效,共有 6 种炫酷的动画效果。该特效提供了一个控制面板来控制图像扭曲的动画,你可以自行调节效果。

HTML 结构

  1. <div id="app"></div>
  2. <div id="itemsWrapper">
  3.     <figure class="grid__item">
  4.         <img class="grid__item-img" src="img/1.jpg" alt="An image" />
  5.         <img class="grid__item-img grid__item-img--large" src="img/1_large.jpg" />
  6.         <figcaption class="grid__item-caption">
  7.             <h2 class="grid__item-title">Our Item Title</h2>
  8.             <p class="grid__item-text">
  9.                 Our Item Description
  10.             </p>
  11.         </figcaption>
  12.     </figure>
  13.     ...
  14. </div>
也想出现在这里?联系我们
创客主机

javascript

  1. const transitionEffect = new GridToFullscreenEffect(
  2.     document.getElementById("app"),
  3.     document.getElementById("itemsWrapper"),
  4.   {
  5.       "duration":1.8,
  6.       "timing":{"type":"sameEnd","props":{"latestStart":0.5,"reverse":true}},
  7.       "activation":{"type":"snake","props":{"rows":4}},
  8.       "transformation":{"type":"flipX"},
  9.       "easings":{"toFullscreen":Quint.easeOut,"toGrid":Quint.easeOut}
  10.   }
  11. );
  12. transitionEffect.init();
  13. imagesLoaded(document.querySelectorAll("img"), instance => {
  14. document.body.classList.remove("loading");
  15.  
  16. // Make Images sets for creating the textures.
  17. let images = [];
  18. for (var i = 0, imageSet = {}; i < instance.elements.length; i++) {
  19.     let image = {
  20.         element: instance.elements[i],
  21.         image: instance.images[i].isLoaded ? instance.images[i].img : null
  22.     };
  23.     if (i % 2 === 0) {
  24.         imageSet = {};
  25.         imageSet.small = image;
  26.     }
  27.  
  28.     if (i % 2 === 1) {
  29.         imageSet.large = image;
  30.         images.push(imageSet);
  31.     }
  32. }
  33. configurator.effect.createTextures(images);
  34. });

Github 网址:https://github.com/Anemolo/WebGLDistortionConfigurator

服务范围 1、专业提供WordPress主题、插件汉化、优化、PHP环境配置等服务请详询在线客服
2、本站承接 WordPress、DedeCMS、ThinkPHP 等系统建站、仿站、开发、定制等服务
3、英文模板(主题)安装费用为120元/次,汉化主题首次免费安装(二次安装30元/次)
售后时间 周一至周五(法定节假日除外) 10:00-22:00
免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: 2107117185@qq.com),我们会及时删除,给您带来的不便,我们深表歉意!
免费下载
(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

创客主机

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

Envato Affiliates

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!