一款超炫的图片排列特效
阅读：3961
时间：2018-02-01 03:25
今天给大家分享一款超炫的图片排列特效。页面加载时。图片纵向堆叠在页面中，当鼠标单击toggle按钮时，图片依次展开。铺满整个网页。效果图如下：
实现的代码。
html代码：
<div class="t-container">
<div class="t-content">
<img class="t-img" src="img00.jpg"
alt="" />
<div class="cover">
</div>
</div>
<div class="t-content">
<img class="t-img" src="img01.jpg"
alt="" />
<div class="cover">
</div>
</div>
<div class="t-content">
<img class="t-img" src="img02.jpg"
alt="" />
<div class="cover">
</div>
</div>
<div class="t-content">
<img class="t-img" src="img03.jpg"
alt="" />
<div class="cover">
</div>
</div>
<div class="t-content">
<img class="t-img" src="img04.jpg"
alt="" />
<div class="cover">
</div>
</div>
<div class="t-content">
<img class="t-img" src="img05.jpg"
alt="" />
<div class="cover">
</div>
</div>
<div class="t-content">
<img class="t-img" src="img06.jpg"
alt="" />
<div class="cover">
</div>
</div>
<div class="t-content">
<img class="t-img" src="img07.jpg"
alt="" />
<div class="cover">
</div>
</div>
<div class="t-content">
<img class="t-img" src="img08.jpg"
alt="" />
<div class="cover">
</div>
</div>
<div class="t-content">
<img class="t-img" src="img09.jpg"
alt="" />
<div class="cover">
</div>
</div>
<div class="t-content">
<img class="t-img" src="img10.jpg"
alt="" />
<div class="cover">
</div>
</div>
<div class="t-content">
<img class="t-img" src="img11.jpg"
alt="" />
<div class="cover">
</div>
</div>
</div>
<div class="container">
<button type="button" class="btn btn-primary" id="toggle">
Toggle</button>
</div>
css3代码：
body
{
overflow: hidden;
}
canvas
{
width: 100%;
height: 100%;
}
.t-container
{
position: absolute;
top: 0;
left: 0;
}
.t-container .t-content
{
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 225px;
}
.t-container .t-content img
{
position: absolute;
width: 400px;
height: 225px;
}
.t-container .t-content .cover
{
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.75);
width: 400px;
height: 225px;
}
.container
{
position: absolute;
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
left: 50%;
bottom: 50px;
}
.container .btn
{
z-index: 9999;
}
js代码：
function createGrid(transform, xx, yy, isHorizon) {
var elemWidth, elemHeight;
if (isHorizon) {
elemWidth = window.innerWidth / 4;
elemHeight = window.innerHeight / 3;
} else {
elemWidth = window.innerWidth / 3;
elemHeight = window.innerHeight / 4;
}
var xPos = elemWidth * xx;
var yPos = elemHeight * yy;
var curTopLeft = { x: transform.topLeft.x, y: transform.topLeft.y };
var curTopRight = { x: transform.topRight.x, y: transform.topRight.y };
var curBotLeft = { x: transform.bottomLeft.x, y: transform.bottomLeft.y };
var curBotRight = { x: transform.bottomRight.x, y: transform.bottomRight.y };
var targetTopLeft = { x: xPos, y: yPos };
var targetTopRight = { x: xPos + elemWidth, y: yPos };
var targetBotLeft = { x: xPos, y: yPos + elemHeight };
var targetBotRight = { x: xPos + elemWidth, y: yPos + elemHeight };
var curObject = { rate0: 1, rate1: 1, rate2: 1, rate3: 1, rate4: 1 };
function onUpdateGridHandler() {
var tempTopLeftX = curTopLeft.x * curObject.rate + targetTopLeft.x * (1 - curObject.rate);
var tempTopLeftY = curTopLeft.y * curObject.rate + targetTopLeft.y * (1 - curObject.rate);
var tempTopRightX = curTopRight.x * curObject.rate + targetTopRight.x * (1 - curObject.rate);
var tempTopRightY = curTopRight.y * curObject.rate + targetTopRight.y * (1 - curObject.rate);
var tempBotLeftX = curBotLeft.x * curObject.rate + targetBotLeft.x * (1 - curObject.rate);
var tempBotLeftY = curBotLeft.y * curObject.rate + targetBotLeft.y * (1 - curObject.rate);
var tempBotRightX = curBotRight.x * curObject.rate + targetBotRight.x * (1 - curObject.rate);
var tempBotRightY = curBotRight.y * curObject.rate + targetBotRight.y * (1 - curObject.rate);
transform.topLeft.x = tempTopLeftX;
transform.topLeft.y = tempTopLeftY;
transform.topRight.x = tempTopRightX;
transform.topRight.y = tempTopRightY;
transform.bottomLeft.x = tempBotLeftX;
transform.bottomLeft.y = tempBotLeftY;
transform.bottomRight.x = tempBotRightX;
transform.bottomRight.y = tempBotRightY;
}
function onUpdate0GridHandler() {
var tempTopLeftX = curTopLeft.x * curObject.rate0 + targetTopLeft.x * (1 - curObject.rate0);
var tempTopLeftY = curTopLeft.y * curObject.rate0 + targetTopLeft.y * (1 - curObject.rate0);
transform.topLeft.x = tempTopLeftX;
transform.topLeft.y = tempTopLeftY;
}
function onUpdate1GridHandler() {
var tempTopRightX = curTopRight.x * curObject.rate1 + targetTopRight.x * (1 - curObject.rate1);
var tempTopRightY = curTopRight.y * curObject.rate1 + targetTopRight.y * (1 - curObject.rate1);
transform.topRight.x = tempTopRightX;
transform.topRight.y = tempTopRightY;
}
function onUpdate2GridHandler() {
var tempBotLeftX = curBotLeft.x * curObject.rate2 + targetBotLeft.x * (1 - curObject.rate2);
var tempBotLeftY = curBotLeft.y * curObject.rate2 + targetBotLeft.y * (1 - curObject.rate2);
transform.bottomLeft.x = tempBotLeftX;
transform.bottomLeft.y = tempBotLeftY;
}
function onUpdate3GridHandler() {
var tempBotRightX = curBotRight.x * curObject.rate3 + targetBotRight.x * (1 - curObject.rate3);
var tempBotRightY = curBotRight.y * curObject.rate3 + targetBotRight.y * (1 - curObject.rate3);
transform.bottomRight.x = tempBotRightX;
transform.bottomRight.y = tempBotRightY;
}
TweenLite.to(curObject, .4, { rate0: 0, onUpdate: onUpdate0GridHandler, ease: "Power2.easeOut" });
TweenLite.to(curObject, .4, { rate1: 0, onUpdate: onUpdate1GridHandler, ease: "Power1.easeOut" });
TweenLite.to(curObject, .4, { rate2: 0, onUpdate: onUpdate2GridHandler, ease: "Power4.easeOut" });
TweenLite.to(curObject, .4, { rate3: 0, onUpdate: onUpdate3GridHandler, ease: "Power3.easeOut" });
//console.log(transform)
var cover = $(transform.element).find(".cover")[0]
TweenLite.to(cover, .4, { opacity: 0, ease: "Power1.easeOut" });
}
function pileElement(transform, num, maxNumber) {
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
// -----------------------------
var camera = {
focus: 400,
self: {
x: 0,
y: 0,
z: 0
},
rotate: {
x: 0,
y: 0,
z: 0
},
up: {
x: 0,
y: 1,
z: 0
},
zoom: 1,
display: {
x: width / 2,
y: height / 2,
z: 0
}
};
// ================================
var y = -10 * (num + 1) + window.innerHeight / 2 * .8;
var width = 400;
var height = 400 * 9 / 16;
var topLeftPos = { x: -width / 2, z: -height };
var topRightPos = { x: width / 2, z: -height };
var botLeftPos = { x: -width / 2, z: 0 };
var botRightPos = { x: width / 2, z: 0 };
var topScale = ((camera.focus - camera.self.z) / ((camera.focus - camera.self.z) - topLeftPos.z)) * camera.zoom;
var botScale = ((camera.focus - camera.self.z) / ((camera.focus - camera.self.z) - botLeftPos.z)) * camera.zoom; //console.log("topScale: " + topScale); //console.log("BotScale: " + botScale);
var targetTopLeftX = topScale * topLeftPos.x;
var targetTopLeftY = topScale * y;
var targetTopRightX = topScale * topRightPos.x;
var targetTopRightY = topScale * y;
var targetBotLeftX = botScale * botLeftPos.x;
var targetBotLeftY = botScale * y;
var targetBotRightX = botScale * botRightPos.x;
var targetBotRightY = botScale * y;
var halfWidth = window.innerWidth / 2;
var halfHeight = window.innerHeight / 2;
// --------------------------------------
transform.topLeft.x = targetTopLeftX + halfWidth;
transform.topLeft.y = targetTopLeftY + halfHeight;
transform.topRight.x = targetTopRightX + halfWidth;
transform.topRight.y = targetTopRightY + halfHeight;
transform.bottomLeft.x = targetBotLeftX + halfWidth;
transform.bottomLeft.y = targetBotLeftY + halfHeight;
transform.bottomRight.x = targetBotRightX + halfWidth;
transform.bottomRight.y = targetBotRightY + halfHeight;
};
function createPile(transform, num) {
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
// -----------------------------
var camera = {
focus: 400,
self: {
x: 0,
y: 0,
z: 0
},
rotate: {
x: 0,
y: 0,
z: 0
},
up: {
x: 0,
y: 1,
z: 0
},
zoom: 1,
display: {
x: width / 2,
y: height / 2,
z: 0
}
};
// ================================
var halfWidth = window.innerWidth / 2;
var halfHeight = window.innerHeight / 2;
var y = -10 * (num + 1) + window.innerHeight / 2 * .8;
var width = 400;
var height = 400 * 9 / 16;
var topLeftPos = { x: -width / 2, z: -height };
var topRightPos = { x: width / 2, z: -height };
var botLeftPos = { x: -width / 2, z: 0 };
var botRightPos = { x: width / 2, z: 0 };
var topScale = ((camera.focus - camera.self.z) / ((camera.focus - camera.self.z) - topLeftPos.z)) * camera.zoom;
var botScale = ((camera.focus - camera.self.z) / ((camera.focus - camera.self.z) - botLeftPos.z)) * camera.zoom; //console.log("topScale: " + topScale); //console.log("BotScale: " + botScale);
var targetTopLeftX = topScale * topLeftPos.x + halfWidth;
var targetTopLeftY = topScale * y + halfHeight;
var targetTopRightX = topScale * topRightPos.x + halfWidth;
var targetTopRightY = topScale * y + halfHeight;
var targetBotLeftX = botScale * botLeftPos.x + halfWidth;
var targetBotLeftY = botScale * y + halfHeight;
var targetBotRightX = botScale * botRightPos.x + halfWidth;
var targetBotRightY = botScale * y + halfHeight;
var curTopLeft = { x: transform.topLeft.x, y: transform.topLeft.y };
var curTopRight = { x: transform.topRight.x, y: transform.topRight.y };
var curBotLeft = { x: transform.bottomLeft.x, y: transform.bottomLeft.y };
var curBotRight = { x: transform.bottomRight.x, y: transform.bottomRight.y };
var targetTopLeft = { x: targetTopLeftX, y: targetTopLeftY };
var targetTopRight = { x: targetTopRightX, y: targetTopRightY };
var targetBotLeft = { x: targetBotLeftX, y: targetBotLeftY };
var targetBotRight = { x: targetBotRightX, y: targetBotRightY };
var curObject = { rate0: 1, rate1: 1, rate2: 1, rate3: 1, rate4: 1 };
function onUpdate0GridHandler() {
var tempTopLeftX = curTopLeft.x * curObject.rate0 + targetTopLeft.x * (1 - curObject.rate0);
var tempTopLeftY = curTopLeft.y * curObject.rate0 + targetTopLeft.y * (1 - curObject.rate0);
transform.topLeft.x = tempTopLeftX;
transform.topLeft.y = tempTopLeftY;
}
function onUpdate1GridHandler() {
var tempTopRightX = curTopRight.x * curObject.rate1 + targetTopRight.x * (1 - curObject.rate1);
var tempTopRightY = curTopRight.y * curObject.rate1 + targetTopRight.y * (1 - curObject.rate1);
transform.topRight.x = tempTopRightX;
transform.topRight.y = tempTopRightY;
}
function onUpdate2GridHandler() {
var tempBotLeftX = curBotLeft.x * curObject.rate2 + targetBotLeft.x * (1 - curObject.rate2);
var tempBotLeftY = curBotLeft.y * curObject.rate2 + targetBotLeft.y * (1 - curObject.rate2);
transform.bottomLeft.x = tempBotLeftX;
transform.bottomLeft.y = tempBotLeftY;
}
function onUpdate3GridHandler() {
var tempBotRightX = curBotRight.x * curObject.rate3 + targetBotRight.x * (1 - curObject.rate3);
var tempBotRightY = curBotRight.y * curObject.rate3 + targetBotRight.y * (1 - curObject.rate3);
transform.bottomRight.x = tempBotRightX;
transform.bottomRight.y = tempBotRightY;
}
TweenLite.to(curObject, .4, { rate0: 0, onUpdate: onUpdate0GridHandler, ease: "Power1.easeOut" });
TweenLite.to(curObject, .4, { rate1: 0, onUpdate: onUpdate1GridHandler, ease: "Power1.easeOut" });
TweenLite.to(curObject, .4, { rate2: 0, onUpdate: onUpdate2GridHandler, ease: "Power3.easeOut" });
TweenLite.to(curObject, .4, { rate3: 0, onUpdate: onUpdate3GridHandler, ease: "Power3.easeOut" });
var cover = $(transform.element).find(".cover")[0];
TweenLite.to(cover, .4, { opacity: 1, ease: "Power1.easeIn" });
// --------------------------------------
/*
transform.topLeft.x = targetTopLeftX + halfWidth;
transform.topLeft.y = targetTopLeftY + halfHeight;
transform.topRight.x = targetTopRightX + halfWidth;
transform.topRight.y = targetTopRightY + halfHeight;
transform.bottomLeft.x = targetBotLeftX + halfWidth;
transform.bottomLeft.y = targetBotLeftY + halfHeight;
transform.bottomRight.x = targetBotRightX + halfWidth;
transform.bottomRight.y = targetBotRightY + halfHeight;*/
};
(function () {
// create PerspectiveTransfrom
var elem = document.getElementById("t-content00");
var width = 400;
var height = 225;
var useBackFacing = true;
var curCount;
var $elem = $(".t-content");
var isHorizon = false;
var isAnimation = true;
var isOpen = true;
if (window.innerWidth > window.innerHeight) isHorizon = true;
var transformArr = [];
//console.log(typeof $elem);
$elem.each(function (index) {
var transform = new PerspectiveTransform(this, width, height, true);
transformArr.push(transform);
});
curCount = transformArr.length - 1;
//
$elem.each(function (index) {
var transform = transformArr[index]
pileElement(transform, index);
});
function animation() {
isAnimation = true;
var transformCount = transformArr.length - curCount - 1;
var xx, yy;
if (isHorizon) {
xx = transformCount % 4;
yy = parseInt(transformCount / 4);
} else {
xx = transformCount % 3;
yy = parseInt(transformCount / 3);
}
createGrid(transformArr[curCount], xx, yy, isHorizon);
curCount--;
if (curCount >= 0) {
setTimeout(animation, 100);
}
else isAnimation = false;
}
function animation2() {
isAnimation = true;
createPile(transformArr[curCount], curCount)
curCount++;
if (curCount <= transformArr.length - 1) setTimeout(animation2, 50);
else isAnimation = false;
};
function loop() {
$elem.each(function (index) {
transformArr[index].update();
});
requestAnimationFrame(loop);
};
loop();
setTimeout(animation, 500);
$("#toggle").click(function (ev) {
if (!isAnimation) {
if (isOpen) {
curCount = 0;
animation2();
}
else {
curCount = transformArr.length - 1;
animation();
}
isOpen = !isOpen;
}
});
})();
注：本文爱编程原创文章，转载请注明原文地址：http://www.w2bc.com/Article/11827
版权所有 爱编程 © Copyright 2012. All Rights Reserved.
闽ICP备12017094号-3
闽ICP备12017094号-3