diff --git a/nico.json b/nico.json index a17e3b4977..e73d8eed4c 100644 --- a/nico.json +++ b/nico.json @@ -4,7 +4,7 @@ "theme": "theme", "sitename": "Ant Design", "siteurl": "", - "permalink": "{{directory}}/{{filename}}.html", + "permalink": "{{directory}}/{{filename}}", "writers": [ "nico.PageWriter", "nico.FileWriter", diff --git a/static/home.js b/static/home.js new file mode 100644 index 0000000000..233c3f0920 --- /dev/null +++ b/static/home.js @@ -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 = $("
").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 = ""; + return html + } + }; + + $("#main").one(animEndStr, function() { + bannerAnim.init() + }) + +}); diff --git a/static/style.css b/static/style.css index 70c07ab434..22ce7cf775 100644 --- a/static/style.css +++ b/static/style.css @@ -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; diff --git a/theme/templates/layout.html b/theme/templates/layout.html index 0db0c833c7..57fc04b6cb 100644 --- a/theme/templates/layout.html +++ b/theme/templates/layout.html @@ -51,6 +51,7 @@ + {%- else %}

{{ post.title }}