GitHub
/
ant-design
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

add home page animation

pull/4/head
afc163 10 years ago
parent
301f6d659a
commit
095ff4ca24
4 changed files with 465 additions and 2 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      nico.json
  2. 462
      static/home.js
  3. 2
      static/style.css
  4. 1
      theme/templates/layout.html

2
nico.json
View File

@ -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
View 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()
})
});

2
static/style.css
View File

@ -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;

1
theme/templates/layout.html
View File

@ -51,6 +51,7 @@
</div>
</div>
</div>
<script src="/static/home.js"></script>
{%- else %}
<article class="markdown">
<h1>{{ post.title }}</h1>

Write Preview
Loading…
Cancel
Save