发文章
发文工具
撰写
网文摘手
文档
视频
思维导图
随笔
相册
原创同步助手
其他工具
图片转文字
文件清理
AI助手
留言交流
之前介绍了好多网页幻灯片。今天给大家带来一款基于TweenMax.js的网页幻灯片。这款幻灯片以不规则的碎片百叶窗的形式切换。切换效果非常漂亮。一起看下效果图:
在线预览 源码下载
实现的代码。
html代码:
<div id="container"> </div> <script src='delaunay.js'></script> <script src='TweenMax.js'></script> <script> // For more check out zachsaucier.com 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. var urls = [ '1.jpg', '2.jpg', '3.jpg', '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
css代码:
body { background-color: #000; margin: 0; overflow: hidden; } canvas { position: absolute; backface-visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; } img { position: absolute; -webkit-transition: opacity .3s; transition: opacity .3s; } #container { position: absolute; width: 768px; height: 432px; left: 0; right: 0; top: 0; bottom: 0; margin: auto; }
注:本文爱编程原创文章,转载请注明原文地址:http://www./Article/9438
来自: 昵称10504424 > 《工作》
0条评论
发表
请遵守用户 评论公约
一款html5 canvas实现的图片玻璃碎片特效
一款html5 canvas实现的图片玻璃碎片特效// canvas settings var imageWidth = 768, imageHeight = 485; var vertices = [], indices, boxes = []; var image, fragments = [], container = document.g...
TweenMax.js 简介GreenSock 动画平台(GSAP)
TweenMax.js 简介GreenSock 动画平台(GSAP)GSAP最初在flash时代(2004-2006)是作为flash软件的插件用来增添动画效果,当时的名字是「GreenSock Tweening Platform」(GreenSock补间平台)。出于自身发...
rtmp Livestream mit Node.js und ffmpeg auf Html5 Canvas malen
rtmp Livestream mit Node.js und ffmpeg auf Html5 Canvas malen.Im Node.js einen neuen ffmpeg Prozess abspalten und einen rtmp Livestream in Video und Audio trennen.Die Daten im Frontend an...
初探JavaScript的截屏实现
doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body><canvas id="canvas&...
使用Chartjs
使用Chartjs.2、chartjs是一个图表控件集合,使用html5的canvas进行绘制。这里我先是进入的 http://chartjs.cn [一个chartjs中文网]当...
PCweb开发与移动web开发区别在于什么?
PCweb开发与移动web开发区别在于什么?首先要明确移动web和webapp是不同的1:移动web开发这部分跟web前端开发差别不大,使用的技术都是html+css+js。手机网页可以理解成pc网页的缩小版加一些触摸特性。...
9个JavaScript图像处理库,收藏好留备用
9个JavaScript图像处理库,收藏好留备用。3:Lena.js 一个轻量级的可以给你图像加各种滤镜的js库。4:Compressor.js 一个使用本地canvas.t...
网站中的一些规范J.
EXP1:div表示块状标记;行内元素不可嵌套块状元素,EXP:<span><div></div></span>这是不规范的;EXP1:PC上有800px、960px、1000px、1200px、1280px、1920px、或者更大。EXP...
剖析Vue原理&实现双向绑定MVVM
// Observer.js// ...省略Object.defineProperty(data, key, { get: function() { // 由于需要在闭包内添加watcher,所以通过Dep定义一...
微信扫码,在手机上查看选中内容