代码之家(www.adminjie.com)精品网站源码,微信源码,游戏源码分享平台。《交流群:1037940574》
当前位置:网站首页 免费源码 html5 css3 正文

html5 tweenmax.js打碎玻璃图片轮播切换特效

时间:2020-06-04 [html5 css3]作者:adminjie 浏览:153 次

html5 tweenmax.js打碎玻璃图片轮播切换特效

特效描述:html5 tweenmax.js 打碎玻璃图片 轮播切换特效,html5碎玻璃图片切换特效,tweenmax.js实列

list-style: none; font-family: 微软雅黑, 宋体, "Helvetica Neue", Arial, Helvetica, sans-serif; font-weight: 500; line-height: 1.1; color: rgb(100, 100, 100); font-size: 24px; border-bottom: 1px solid rgb(235, 235, 235); background-color: rgb(255, 255, 255);">代码结构

1. 引入CSS

1
<link rel=string" class="page_speeder_524722389">"stylesheet" type="text/css" href="css/style.css" />

2. 引入JS

1
2
<script src='js/delaunay.js'></script>
<script src='js/TweenMax.js'></script>

3. HTML代码

<div id="container"> </div>  <script src='js/delaunay.js'></script>   <script src='js/TweenMax.js'></script>   <script>  const TWO_PI = Math.PI * 2;  var images = [],       imageIndex = 0;  var image,      imageWidth = 768,      imageHeight = 485;  var vertices = [],      indices = [],      prevfrag = [],      fragments = [];  var margin = 50;  var container = document.getElementById('container');  var clickPosition = [imageWidth * 0.5, imageHeight * 0.5];  window.onload = function() {      TweenMax.set(container, {perspective:500});      // images from http://www.hdwallpapers.in      var urls = [              'images/1.jpg',              'images/2.jpg',              'images/3.jpg',              'images/4.jpg'          ],          image,          loaded = 0;      // very quick and dirty hack to load and display the first image asap      images[0] = image = new Image();          image.onload = function() {              if (++loaded === 1) {                  for (var i = 1; i < 4; i++) {                      images[i] = image = new Image();                      image.src = urls[i];                  }                   placeImage();              }          };          image.src = urls[0];   };  function placeImage(transitionIn) {      image = images[imageIndex];      if (++imageIndex === images.length) imageIndex = 0;      var num = Math.random();      if(num < .25) {        image.direction = "left";      } else if(num < .5) {        image.direction = "top";      } else if(num < .75) {        image.direction = "bottom";      } else {        image.direction = "right";      }      container.appendChild(image);      image.style.opacity = 0;      if (transitionIn !== false) {          triangulateIn();      }  }  function triangulateIn(event) {      var box = image.getBoundingClientRect(),          top = box.top,          left = box.left;      if(image.direction == "left") {        clickPosition[0] = 0;         clickPosition[1] = imageHeight / 2;      } else if(image.direction == "top") {        clickPosition[0] = imageWidth / 2;        clickPosition[1] = 0;      } else if(image.direction == "bottom") {        clickPosition[0] = imageWidth / 2;        clickPosition[1] = imageHeight;      } else if(image.direction == "right") {        clickPosition[0] = imageWidth;        clickPosition[1] = imageHeight / 2;      }       triangulate();      build();  }  function triangulate() {      for(var i = 0; i < 40; i++) {              x = -margin + Math.random() * (imageWidth + margin * 2);        y = -margin + Math.random() * (imageHeight + margin * 2);        vertices.push([x, y]);      }      vertices.push([0,0]);      vertices.push([imageWidth,0]);      vertices.push([imageWidth, imageHeight]);      vertices.push([0, imageHeight]);      vertices.forEach(function(v) {          v[0] = clamp(v[0], 0, imageWidth);          v[1] = clamp(v[1], 0, imageHeight);      });      indices = Delaunay.triangulate(vertices);  }  function build() {      var p0, p1, p2,          fragment;      var tl0 = new TimelineMax({onComplete:buildCompleteHandler});      for (var i = 0; i < indices.length; i += 3) {          p0 = vertices[indices[i + 0]];          p1 = vertices[indices[i + 1]];          p2 = vertices[indices[i + 2]];          fragment = new Fragment(p0, p1, p2);          var dx = fragment.centroid[0] - clickPosition[0],              dy = fragment.centroid[1] - clickPosition[1],              d = Math.sqrt(dx * dx + dy * dy),              rx = 30 * sign(dy),              ry = 90 * -sign(dx),              delay = d * 0.003 * randomRange(0.9, 1.1);          fragment.canvas.style.zIndex = Math.floor(d).toString();          var tl1 = new TimelineMax();           if(image.direction == "left") {            rx = Math.abs(rx);             ry = 0;                    } else if(image.direction == "top") {            rx = 0;            ry = Math.abs(ry);          } else if(image.direction == "bottom") {            rx = 0;            ry = - Math.abs(ry);          } else if(image.direction == "right") {            rx = - Math.abs(rx);            ry = 0;          }           tl1.from(fragment.canvas, 1, {                z:-50,                rotationX:rx,                rotationY:ry,                scaleX:0,                scaleY:0,                ease:Cubic.easeIn           });          tl1.from(fragment.canvas, 0.4,{alpha:0}, 0.6);          tl0.insert(tl1, delay);          fragments.push(fragment);          container.appendChild(fragment.canvas);      }  }  function buildCompleteHandler() {      // add pooling?      image.style.opacity = 1;      image.addEventListener('transitionend', function catchTrans() {        fragments.forEach(function(f) {            container.removeChild(f.canvas);        });        fragments.length = 0;        vertices.length = 0;        indices.length = 0;        placeImage();        this.removeEventListener('transitionend',catchTrans,false);      }, false);  }  //////////////  // MATH UTILS  //////////////  function randomRange(min, max) {      return min + (max - min) * Math.random();  }  function clamp(x, min, max) {      return x < min ? min : (x > max ? max : x);  }  function sign(x) {      return x < 0 ? -1 : 1;  }  //////////////  // FRAGMENT  //////////////  Fragment = function(v0, v1, v2) {      this.v0 = v0;      this.v1 = v1;      this.v2 = v2;      this.computeBoundingBox();      this.computeCentroid();      this.createCanvas();      this.clip();  };  Fragment.prototype = {      computeBoundingBox:function() {          var xMin = Math.min(this.v0[0], this.v1[0], this.v2[0]),              xMax = Math.max(this.v0[0], this.v1[0], this.v2[0]),              yMin = Math.min(this.v0[1], this.v1[1], this.v2[1]),              yMax = Math.max(this.v0[1], this.v1[1], this.v2[1]);           this.box = {              x:Math.round(xMin),              y:Math.round(yMin),              w:Math.round(xMax - xMin),              h:Math.round(yMax - yMin)          };      },      computeCentroid:function() {          var x = (this.v0[0] + this.v1[0] + this.v2[0]) / 3,              y = (this.v0[1] + this.v1[1] + this.v2[1]) / 3;          this.centroid = [x, y];      },      createCanvas:function() {          this.canvas = document.createElement('canvas');          this.canvas.width = this.box.w;          this.canvas.height = this.box.h;          this.canvas.style.width = this.box.w + 'px';          this.canvas.style.height = this.box.h + 'px';          this.canvas.style.left = this.box.x + 'px';          this.canvas.style.top = this.box.y + 'px';          this.ctx = this.canvas.getContext('2d');      },      clip:function() {          this.ctx.save();          this.ctx.translate(-this.box.x, -this.box.y);          this.ctx.beginPath();          this.ctx.moveTo(this.v0[0], this.v0[1]);          this.ctx.lineTo(this.v1[0], this.v1[1]);          this.ctx.lineTo(this.v2[0], this.v2[1]);          this.ctx.closePath();          this.ctx.clip();          this.ctx.drawImage(image, 0, 0);          this.ctx.restore();      }  };//@ sourceURL=pen.js  </script>

html5 tweenmax.js打碎玻璃图片轮播切换特效


大小 : 520 KB |  下载量 : 0  |  文件类型 : 压缩文件  

转载请注明来源:html5 tweenmax.js打碎玻璃图片轮播切换特效

本文永久链接地址:https://www.adminjie.com/post/2724.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:点此维权 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 代码之家会员升级
  • 最新文章
    • 紫色店铺商家信息后台管理模板

      紫色店铺商家信息后台管理模板

      紫色店铺商家信息后台管理模板紫色店铺商家信息后台管理模板基于Bootstrap2.3.2制作,DIV+CSS布局,全套模板,包括登录、模块设置、样式模板设置、文...

    • 蓝色企业CMS网站后台管理模板

      蓝色企业CMS网站后台管理模板

      蓝色企业CMS网站后台管理模板蓝色企业CMS响应式后台管理模板基于Bootstrap3.0.0制作,自适应分辨率,兼容PC端和移动端,全套模板,包括产品管理、资...

    • 简洁商城系统后台管理模板

      简洁商城系统后台管理模板

      简洁商城系统后台管理模板简洁商城系统后台管理模板,简单,大气,全套模板,包括登录、旅游管理、系统管理、信息管理等后台模板页面。...

    • 公司网站发展时间轴特效

      公司网站发展时间轴特效

      公司网站发展时间轴特效一款简洁、美观的公司网站发展时间轴特效。...

    • 原生js日历控件年月日时间选择器代码

      原生js日历控件年月日时间选择器代码

      原生js日历控件年月日时间选择器代码特效描述:原生js日历控件年月日时间选择器,代码结构1.引入JS1<scriptsrc="laydat...

  • 阿里云大优惠
  • 热门文章