一款基于TweenMax.js的网页幻灯片(转)

之前介绍了好多网页幻灯片。今天给大家带来一款基于TweenMax.js的网页幻灯片。这款幻灯片以不规则的碎片百叶窗的形式切换。切换效果非常漂亮。一起看下效果图：

在线预览源码下载

实现的代码。

html代码：

 <div id="container"></div><script src='delaunay.js'></script><script src='TweenMax.js'></script><script>// For more check out zachsaucier.comconst 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.invar urls = ['1.jpg','2.jpg','3.jpg','4.jpg'],image,loaded = 0;// very quick and dirty hack to load and display the first image asapimages[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.w2bc.com/Article/9438

源码下载地址：http://download.csdn.net/detail/dragoo1/9239645

一款基于TweenMax.js的网页幻灯片(转)相关推荐

一款基于TweenMax.js的网页幻灯片
之前介绍了好多网页幻灯片.今天给大家带来一款基于TweenMax.js的网页幻灯片.这款幻灯片以不规则的碎片百叶窗的形式切换.切换效果非常漂亮.一起看下效果图: 在线预览源码下载实现的代码. ...
linux系统宝塔安装nodejs,基于debian宝塔面板安装nodebb – 一款基于Node.js的论坛程序...
NodeBB论坛程序是基于 Node.js构建,并支持Redis,MongoDB或PostgreSQL数据库.它利用Web套接字进行即时交互和实时通知.NodeBB具有许多现成的现代功能,例如社交网络 ...
基于Voxel.js搭建网页方块世界游戏
Voxel.js,是用于呈现在浏览器上的方块游戏的构建工具包
飞机大战HTML5游戏源码，基于Canvas制作的网页版飞机大战游戏+飞机大战手机端
简介: 飞机大战HTML5游戏源码是一款基于Canvas制作的网页版飞机大战游戏,画质精美的飞机大战手机端游戏源码网盘下载地址: http://kekewangLuo.net/W1S2LQcqAT2 ...
基于Vue.js制作的仿车轮驾考通APP端页面
背景:学习完Vue,老师要求期末作业以Vue技术做一个手机端或者PC端的前端小项目.期末临近,周围的同学有的仿微信APP端,有的仿QQAPP端.小萍去年考科目一用了车轮驾考通刷题,然后她最后决定基于V ...
基于 vue.js 的仿QQ聊天室
简介这是一款基于 vue.js 开发的聊天室组件库,在提供基础封装的同时,最大程度的增加扩展性. 下面是效果演示图: MChat组件效果图: IChat组件效果图: 如何安装使用 npm 安装 n ...
php 3d animation,基于three.js的酷炫Canvas 3D线条动画特效
[温馨提示]源码包解压密码:www.youhutong.com 效果图: 描述说明: html5-canvas-animation是一款基于three.js的HTML5 canvas 3D线条动画特效 ...
这是基于three.js+photo-sphere-viewer.js 全景图场景切换
这是基于three.js+photo-sphere-viewer.js 全景图场景切换效果图 :http://122.51.121.122:8066/szovo csdn下载链接: https:// ...
网页版2048html制作,基于HTML＋CSS＋JS的网页版2048的实现.pdf
ELECTRONICS WORLD ・探索与观察基于HTML+CSS+JS的网页版2048的实现山西农业大学王艺燕 [摘要] 描述了一个使用HTML和CSS进行UI界面设计,使用JS进行后台逻辑 ...

一款基于TweenMax.js的网页幻灯片(转)

一款基于TweenMax.js的网页幻灯片(转)相关推荐

最新文章

热门文章