mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-27 12:39:49 +08:00
add home page animation
This commit is contained in:
afc163
parent
301f6d659a
commit
095ff4ca24
@ -4,7 +4,7 @@
|
||||
"theme": "theme",
|
||||
"sitename": "Ant Design",
|
||||
"siteurl": "",
|
||||
"permalink": "{{directory}}/{{filename}}.html",
|
||||
"permalink": "{{directory}}/{{filename}}",
|
||||
"writers": [
|
||||
"nico.PageWriter",
|
||||
"nico.FileWriter",
|
||||
|
||||
462
static/home.js
Normal file
462
static/home.js
Normal file
@ -0,0 +1,462 @@
|
||||
$(function() {
|
||||
var animEndStr = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
|
||||
var getTransform = function() {
|
||||
var style = "transform",
|
||||
anim = "animation",
|
||||
pers = "perspective";
|
||||
var i, prefix = ['webkit', 'moz', 'ms', 'o'],
|
||||
htmlStyle = $("html")[0].style;
|
||||
if (!"transform" in htmlStyle) {
|
||||
for (i in prefix) {
|
||||
style = "-" + prefix[i] + "-transform";
|
||||
if (style in htmlStyle) break;
|
||||
}
|
||||
}
|
||||
if (!"animation" in htmlStyle) {
|
||||
for (i in prefix) {
|
||||
anim = "-" + prefix[i] + "-animation";
|
||||
if (anim in htmlStyle) break;
|
||||
}
|
||||
}
|
||||
if (!"perspective" in htmlStyle) {
|
||||
for (i in prefix) {
|
||||
pers = "-" + prefix[i] + "-perspective";
|
||||
if (pers in htmlStyle) break;
|
||||
}
|
||||
}
|
||||
return [style, anim, pers]
|
||||
};
|
||||
var bannerAnim = {
|
||||
w: 2185,
|
||||
h: 1062,
|
||||
p_w: 0,
|
||||
p_h: 0,
|
||||
img: "https://t.alipayobjects.com/images/T1URpfXeXtXXXXXXXX.jpg",
|
||||
lineData: [{
|
||||
x: 225,
|
||||
y: 785,
|
||||
w: 70,
|
||||
h: 70,
|
||||
line: 3,
|
||||
color: "#BEC4C8",
|
||||
anim: "from-x-left",
|
||||
rotate: -19,
|
||||
circ: {
|
||||
x: 10,
|
||||
y: 10,
|
||||
w: 50,
|
||||
h: 50
|
||||
}
|
||||
}, {
|
||||
x: 870,
|
||||
y: 245,
|
||||
w: 70,
|
||||
h: 70,
|
||||
line: 3,
|
||||
color: "#BEC4C8",
|
||||
anim: "from-x-left",
|
||||
circ: {
|
||||
x: 10,
|
||||
y: 10,
|
||||
w: 50,
|
||||
h: 50
|
||||
}
|
||||
}, {
|
||||
x: 940,
|
||||
y: 455,
|
||||
w: 230,
|
||||
h: 110,
|
||||
line: 3,
|
||||
color: "#6EB4E0",
|
||||
anim: "from-x-right",
|
||||
circ: [{
|
||||
x: 20,
|
||||
y: 15,
|
||||
w: 80,
|
||||
h: 80
|
||||
}, {
|
||||
x: 125,
|
||||
y: 15,
|
||||
w: 80,
|
||||
h: 80
|
||||
}]
|
||||
}, {
|
||||
x: 1160,
|
||||
y: 670,
|
||||
w: 410,
|
||||
h: 110,
|
||||
line: 3,
|
||||
color: "#F0776F",
|
||||
anim: "from-y-bottom",
|
||||
circ: [{
|
||||
x: 60,
|
||||
y: 15,
|
||||
w: 80,
|
||||
h: 80
|
||||
}, {
|
||||
x: 165,
|
||||
y: 15,
|
||||
w: 80,
|
||||
h: 80
|
||||
}, {
|
||||
x: 285,
|
||||
y: 15,
|
||||
w: 80,
|
||||
h: 80
|
||||
}]
|
||||
}, {
|
||||
x: 1285,
|
||||
y: 170,
|
||||
w: 484,
|
||||
h: 110,
|
||||
line: 3,
|
||||
color: "#BEC4C8",
|
||||
anim: "from-y-top",
|
||||
circ: [{
|
||||
x: 30,
|
||||
y: 15,
|
||||
w: 80,
|
||||
h: 80
|
||||
}, {
|
||||
x: 145,
|
||||
y: 15,
|
||||
w: 80,
|
||||
h: 80
|
||||
}, {
|
||||
x: 265,
|
||||
y: 15,
|
||||
w: 80,
|
||||
h: 80
|
||||
}, {
|
||||
x: 375,
|
||||
y: 15,
|
||||
w: 80,
|
||||
h: 80
|
||||
}]
|
||||
}, {
|
||||
x: 1330,
|
||||
y: 520,
|
||||
w: 70,
|
||||
h: 70,
|
||||
line: 3,
|
||||
color: "#F0776F",
|
||||
anim: "from-x-left",
|
||||
circ: {
|
||||
x: 10,
|
||||
y: 10,
|
||||
w: 50,
|
||||
h: 50
|
||||
}
|
||||
}, {
|
||||
x: 1435,
|
||||
y: 365,
|
||||
w: 200,
|
||||
h: 190,
|
||||
line: 3,
|
||||
color: "#BEC4C8",
|
||||
anim: "from-x-right",
|
||||
circ: [{
|
||||
x: 20,
|
||||
y: 10,
|
||||
w: 75,
|
||||
h: 75
|
||||
}, {
|
||||
x: 110,
|
||||
y: 10,
|
||||
w: 75,
|
||||
h: 75
|
||||
}, {
|
||||
x: 20,
|
||||
y: 100,
|
||||
w: 75,
|
||||
h: 75
|
||||
}, {
|
||||
x: 110,
|
||||
y: 100,
|
||||
w: 75,
|
||||
h: 75
|
||||
}]
|
||||
}, {
|
||||
x: 1655,
|
||||
y: 325,
|
||||
w: 115,
|
||||
h: 320,
|
||||
line: 3,
|
||||
color: "#F0776F",
|
||||
anim: "from-x-right",
|
||||
circ: [{
|
||||
x: 25,
|
||||
y: 15,
|
||||
w: 75,
|
||||
h: 75
|
||||
}, {
|
||||
x: 35,
|
||||
y: 25,
|
||||
w: 55,
|
||||
h: 55
|
||||
}, {
|
||||
x: 25,
|
||||
y: 115,
|
||||
w: 75,
|
||||
h: 75
|
||||
}, {
|
||||
x: 35,
|
||||
y: 125,
|
||||
w: 55,
|
||||
h: 55
|
||||
}, {
|
||||
x: 25,
|
||||
y: 225,
|
||||
w: 75,
|
||||
h: 75
|
||||
}, {
|
||||
x: 35,
|
||||
y: 235,
|
||||
w: 55,
|
||||
h: 55
|
||||
}]
|
||||
}, {
|
||||
x: 1680,
|
||||
y: 735,
|
||||
w: 70,
|
||||
h: 70,
|
||||
line: 3,
|
||||
color: "#F0776F",
|
||||
anim: "from-y-bottom",
|
||||
circ: {
|
||||
x: 10,
|
||||
y: 10,
|
||||
w: 50,
|
||||
h: 50
|
||||
}
|
||||
}, {
|
||||
x: 1845,
|
||||
y: 485,
|
||||
w: 115,
|
||||
h: 410,
|
||||
line: 3,
|
||||
color: "#6EB4E0",
|
||||
anim: "from-y-bottom",
|
||||
circ: [{
|
||||
x: 25,
|
||||
y: 15,
|
||||
w: 75,
|
||||
h: 75
|
||||
}, {
|
||||
x: 35,
|
||||
y: 25,
|
||||
w: 55,
|
||||
h: 55
|
||||
}, {
|
||||
x: 25,
|
||||
y: 115,
|
||||
w: 75,
|
||||
h: 75
|
||||
}, {
|
||||
x: 35,
|
||||
y: 125,
|
||||
w: 55,
|
||||
h: 55
|
||||
}, {
|
||||
x: 25,
|
||||
y: 215,
|
||||
w: 75,
|
||||
h: 75
|
||||
}, {
|
||||
x: 35,
|
||||
y: 225,
|
||||
w: 55,
|
||||
h: 55
|
||||
}, {
|
||||
x: 25,
|
||||
y: 310,
|
||||
w: 75,
|
||||
h: 75
|
||||
}, {
|
||||
x: 35,
|
||||
y: 320,
|
||||
w: 55,
|
||||
h: 55
|
||||
}]
|
||||
}, {
|
||||
x: 1865,
|
||||
y: 290,
|
||||
w: 70,
|
||||
h: 70,
|
||||
line: 3,
|
||||
color: "#F0776F",
|
||||
anim: "from-y-top",
|
||||
circ: {
|
||||
x: 10,
|
||||
y: 10,
|
||||
w: 50,
|
||||
h: 50
|
||||
}
|
||||
}, {
|
||||
x: 1995,
|
||||
y: 280,
|
||||
w: 230,
|
||||
h: 420,
|
||||
line: 3,
|
||||
color: "#6EB4E0",
|
||||
anim: "from-x-right",
|
||||
circ: [{
|
||||
x: 25,
|
||||
y: 30,
|
||||
w: 75,
|
||||
h: 75
|
||||
}, {
|
||||
x: 35,
|
||||
y: 40,
|
||||
w: 55,
|
||||
h: 55
|
||||
}, {
|
||||
x: 25,
|
||||
y: 175,
|
||||
w: 75,
|
||||
h: 75
|
||||
}, {
|
||||
x: 35,
|
||||
y: 185,
|
||||
w: 55,
|
||||
h: 55
|
||||
}, {
|
||||
x: 25,
|
||||
y: 310,
|
||||
w: 75,
|
||||
h: 75
|
||||
}, {
|
||||
x: 35,
|
||||
y: 320,
|
||||
w: 55,
|
||||
h: 55
|
||||
}, {
|
||||
x: 130,
|
||||
y: 30,
|
||||
w: 75,
|
||||
h: 75
|
||||
}, {
|
||||
x: 140,
|
||||
y: 40,
|
||||
w: 55,
|
||||
h: 55
|
||||
}, {
|
||||
x: 130,
|
||||
y: 175,
|
||||
w: 75,
|
||||
h: 75
|
||||
}, {
|
||||
x: 140,
|
||||
y: 185,
|
||||
w: 55,
|
||||
h: 55
|
||||
}, {
|
||||
x: 130,
|
||||
y: 310,
|
||||
w: 75,
|
||||
h: 75
|
||||
}, {
|
||||
x: 140,
|
||||
y: 320,
|
||||
w: 55,
|
||||
h: 55
|
||||
}]
|
||||
}, ],
|
||||
init: function() {
|
||||
var self = this;
|
||||
self.box = $(".banner-box");
|
||||
self.animBox = $("#bannerAnim");
|
||||
self.imgBox = $(".banner-img");
|
||||
self.loadImg();
|
||||
|
||||
},
|
||||
loadImg: function() {
|
||||
var self = this;
|
||||
var loadBox = $("<div class='load-box'><em></em></div>").appendTo(self.animBox);
|
||||
var img = new Image();
|
||||
img.onload = function() {
|
||||
loadBox.addClass("load-out").one(animEndStr, function() {
|
||||
loadBox.remove();
|
||||
self.start();
|
||||
});
|
||||
};
|
||||
img.src = self.img;
|
||||
},
|
||||
bannerResize: function() {
|
||||
var self = bannerAnim;
|
||||
self.p_w = self.box.parent().width();
|
||||
self.p_h = self.box.parent().height();
|
||||
//获取比例；
|
||||
var w_s = self.p_w / self.w,
|
||||
h_s = self.p_h / self.h;
|
||||
var scale = w_s > h_s ? w_s : h_s;
|
||||
var tra = getTransform()[0];
|
||||
self.animBox.attr("style", "");
|
||||
self.imgBox.attr("style", "");
|
||||
var boxSty = {
|
||||
"width": self.w,
|
||||
"height": self.h
|
||||
};
|
||||
boxSty[tra] = "scale(" + scale + "," + scale + ")";
|
||||
self.animBox.css(boxSty);
|
||||
var imgSty = {};
|
||||
imgSty[tra] = "scale(" + scale + "," + scale + ")";
|
||||
self.imgBox.css(imgSty);
|
||||
if (w_s > h_s) {
|
||||
self.animBox.css("margin-top", (self.p_h - self.h * w_s) / 2);
|
||||
self.imgBox.css("margin-top", (self.p_h - self.h * w_s) / 2);
|
||||
} else {
|
||||
self.animBox.css("margin-left", (self.p_w - self.w * h_s) / 2);
|
||||
self.imgBox.css("margin-left", (self.p_w - self.w * h_s) / 2);
|
||||
}
|
||||
},
|
||||
start: function() {
|
||||
var self = this;
|
||||
var animClass = getTransform()[1] + "-delay";
|
||||
var parr = [];
|
||||
for (var i = 0; i < self.lineData.length; i++) {
|
||||
var mc = $(self.addLine(self.lineData[i])).appendTo(self.animBox);
|
||||
var delay = Math.random() * .7;
|
||||
parr.push(delay);
|
||||
mc.css(animClass, delay + "s");
|
||||
}
|
||||
var max = parr[0],
|
||||
j = 0;
|
||||
for (var i = 0; i < parr.length; i++) {
|
||||
if (max < parr[i]) {
|
||||
max = parr[i];
|
||||
j = i;
|
||||
}
|
||||
}
|
||||
//console.log(self.box.find(".delay-mode").eq(j),j);
|
||||
self.animBox.find(".delay-mode").eq(j).one(animEndStr, function() {
|
||||
self.animBox.addClass("to-img-blur");
|
||||
self.imgBox.addClass("from-img-blur").one(animEndStr, function() {
|
||||
self.animBox.remove()
|
||||
});
|
||||
});
|
||||
self.bannerResize();
|
||||
$(window).bind("resize", self.bannerResize);
|
||||
},
|
||||
addLine: function(obj) {
|
||||
var self = this;
|
||||
var transform = getTransform()[0];
|
||||
var rotate = obj.rotate ? transform + ":rotate(" + obj.rotate + "deg);" : "";
|
||||
var html = "<div class='banner-line-absolute delay-mode " + obj.anim + "' style='width: " + obj.w + "px;height:" + obj.h + "px;border: " + obj.line + "px solid " + obj.color + ";left:" + obj.x + "px;top:" + obj.y + "px;" + rotate + "'>";
|
||||
if (obj.circ.length) {
|
||||
for (var i = 0; i < obj.circ.length; i++) {
|
||||
html += "<div class='banner-line-absolute' style='width: " + obj.circ[i].w + "px;height:" + obj.circ[i].h + "px;border: " + obj.line + "px solid " + obj.color + ";left:" + (obj.circ[i].x - obj.line) + "px;top:" + (obj.circ[i].y - obj.line) + "px;border-radius:" + obj.circ[i].w + "px'></div>"
|
||||
}
|
||||
} else {
|
||||
html += "<div class='banner-line-absolute' style='width: " + obj.circ.w + "px;height:" + obj.circ.h + "px;border: " + obj.line + "px solid " + obj.color + ";left:" + (obj.circ.x - obj.line) + "px;top:" + (obj.circ.y - obj.line) + "px;border-radius:" + obj.circ.w + "px'></div>"
|
||||
}
|
||||
html += "</div>";
|
||||
return html
|
||||
}
|
||||
};
|
||||
|
||||
$("#main").one(animEndStr, function() {
|
||||
bannerAnim.init()
|
||||
})
|
||||
|
||||
});
|
||||
@ -206,7 +206,7 @@ header {
|
||||
-webkit-animation: yTopMatrix .3s ease-out;
|
||||
}
|
||||
.banner-box .banner-img {
|
||||
background: url("images/banner.jpg") center no-repeat;
|
||||
background: url("https://t.alipayobjects.com/images/T1URpfXeXtXXXXXXXX.jpg") center no-repeat;
|
||||
height: 1062px;
|
||||
width: 2185px;
|
||||
opacity: 0;
|
||||
|
||||
@ -51,6 +51,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/static/home.js"></script>
|
||||
{%- else %}
|
||||
<article class="markdown">
|
||||
<h1>{{ post.title }}</h1>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user