update page style

site/static/home.js

-$(function() {
-  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 C = createjs || {},
-    T = TweenMax || {};
-  var bannerAnim = {
-    w: 2400,
-    h: 1300,
-    p_w: 0,
-    p_h: 0,
-    stage: null,
-    Canvas: null,
-    lineData:[
-      {x:270,y:795,line:4,color:["rgba(190,196,200,1)","rgba(190,196,200,0)"],w:70,h:70,rotate:-15,circ:{x:10,y:10,r:50}},
-      {x:850,y:220,w:70,h:70,line:4,color:["rgba(190,196,200,1)","rgba(190,196,200,0)"],circ:{x:10,y:10,r:50}},
-      {x:930,y:445,w:230,h:110,line:4,color:["rgba(110,180,224,1)","rgba(110,180,224,0)"],circ:[{x:20,y:15,r:80},{x:125,y:15,r:80}]},
-      {x:1160,y:670,w:440,h:115,line:4,color:["rgba(240,119,111,1)","rgba(240,119,111,0)"],circ:[{x:60,y:15,r:80},{x:178,y:15,r:80},{x:308,y:15,r:80}]},
-      {x:1290,y:135,w:524,h:115,line:4,color:["rgba(190,196,200,1)","rgba(190,196,200,0)"],circ:[{x:40,y:15,r:80},{x:165,y:15,r:80},{x:295,y:15,r:80},{x:415,y:15,r:80}]},
-      {x:1345,y:510,w:75,h:75,line:4,color:["rgba(240,119,111,1)","rgba(240,119,111,0)"],circ:{x:10,y:10,r:55}},
-      {x:1455,y:340,w:210,h:210,line:4,color:["rgba(190,196,200,1)","rgba(190,196,200,0)"],circ:[{x:20,y:20,r:75},{x:120,y:20,r:75},{x:20,y:110,r:75},{x:120,y:110,r:75}]},
-      {x:1695,y:300,w:120,h:345,line:4,color:["rgba(240,119,111,1)","rgba(240,119,111,0)"],circ:[{x:25,y:15,r:75},{x:35,y:25,r:55},{x:25,y:125,r:75},{x:35,y:135,r:55},{x:25,y:245,r:75},{x:35,y:255,r:55}]},
-      {x:1730,y:745,w:75,h:75,line:4,color:["rgba(240,119,111,1)","rgba(240,119,111,0)"],circ:{x:10,y:10,r:55}},
-      {x:1910,y:470,w:115,h:450,line:4,color:["rgba(110,180,224,1)","rgba(110,180,224,0)"],circ:[{x:25,y:20,r:75},{x:35,y:30,r:55},{x:25,y:130,r:75},{x:35,y:140,r:55},{x:25,y:240,r:75},{x:35,y:250,r:55},{x:25,y:340,r:75},{x:35,y:350,r:55}]},
-      {x:1920,y:260,w:75,h:75,line:4,color:["rgba(240,119,111,1)","rgba(240,119,111,0)"],circ:{x:10,y:10,r:55}},
-      {x:2070,y:250,w:230,h:455,line:4,color:["rgba(110,180,224,1)","rgba(110,180,224,0)"],circ:[{x:25,y:30,r:75},{x:35,y:40,r:55},{x:25,y:185,r:75},{x:35,y:195,r:55},{x:25,y:340,r:75},{x:35,y:350,r:55}, {x:140,y:30,r:75},{x:150,y:40,r:55},{x:140,y:185,r:75},{x:150,y:195,r:55},{x:140,y:340,r:75},{x:150,y:350,r:55}]},
-    ],
-    init: function() {
-      var self = this;
-      self.box = $(".banner-box");
-      self.animBox = $("#bannerAnim");
-      self.imgBox = $(".banner-img");
-      self.txtBox = $(".banner-entry");
-      //创建canvas;
-      self.Canvas = $("<canvas id='myC' style='display:block'></canvas>").appendTo(self.animBox); //document.createElement('canvas');
-      self.Canvas[0].width = self.w;
-      self.Canvas[0].height = self.h;
-      self.stage = new C.Stage('myC');
-
-      C.Ticker.setFPS(30);
-      C.Ticker.useRAF = true;
-      C.Ticker.addEventListener("tick", self.stage);
-      C.Touch.enable(self.stage, true); //单指触摸
-
-      self.bannerResize();
-      $(window).bind("resize", self.bannerResize);
-      self.start()
-    },
-    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 + 0.08,
-        h_s = self.p_h / self.h + 0.08;
-      var scale = self.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,
-          "margin-left": (self.p_w - self.w * w_s) / 2
-        });
-        self.imgBox.css({
-          "margin-top": (self.p_h - self.h * w_s) / 2 - (1 - scale) * self.h / 2,
-          "margin-left": (self.p_w - self.w * w_s) / 2 - (1 - scale) * self.w / 2
-        });
-      } else {
-        self.animBox.css({
-          "margin-left": (self.p_w - self.w * h_s) / 2,
-          "margin-top": (self.p_h - self.h * h_s) / 2
-        });
-        self.imgBox.css({
-          "margin-left": (self.p_w - self.w * h_s) / 2 - (1 - scale) * self.w / 2,
-          "margin-top": (self.p_h - self.h * h_s) / 2 - (1 - scale) * self.h / 2
-        });
-      }
-    },
-    start: function() {
-      this.addLine();
-    },
-    glowLine: function(line, w, h, color) {
-      w = w || 0, h = h || 0;
-      var r = w / 2 || h / 2;
-      var glBox = new C.Container();
-      var Line = new C.Shape();
-      var glow = new C.Shape();
-      glBox.addChild(glow);
-      glBox.addChild(Line);
-      glow.alpha = .3;
-      var blurFilter = new C.BlurFilter(3, 3, 10);
-      glow.filters = [blurFilter];
-      var bounds = blurFilter.getBounds();
-      if (w) {
-        Line.graphics.ss(line, "round").rs(color, [0, 1], r, h, 0, r, h, r).mt(0, 0).lt(w, h);
-        glow.graphics.ss(line + 4, "round").rs(color, [0, 1], r, h, 0, r, h, r).mt(0, 0).lt(w, h);
-        glow.cache(bounds.x, bounds.y - 2, w + bounds.width, line + bounds.height);
-      } else {
-        Line.graphics.ss(line, "round").rs(color, [0, 1], w, r, 0, w, r, r).mt(0, 0).lt(w, h);
-        glow.graphics.ss(line + 4, "round").rs(color, [0, 1], w, r, 0, w, r, r).mt(0, 0).lt(w, h);
-        glow.cache(bounds.x - 2, bounds.y, line + bounds.width, h + bounds.height);
-      }
-      return glBox;
-    },
-    addMouseAnim: function() {
-      var self = this,
-        img_x = self.imgBox;
-      $("body").bind("mousemove", function(e) {
-        var _x = -(e.pageX - $(this).width() / 2) / 40; //,_y= -(e.pageY-$(this).height()/2)/35;
-        if (_x > self.w * .04) {
-          _x = self.w * .04
-        }
-        T.set(self.imgBox, {
-          scale: self.scale,
-          transformPerspective: 400
-        });
-        T.killTweensOf(self.imgBox, true);
-        var tobj = {};
-        if (navigator.userAgent.indexOf('Firefox') >= 0) {
-          tobj.x = _x
-        } else {
-          tobj.x = _x;
-          tobj.rotationY = _x / 60;
-        }
-        T.to(self.imgBox, .5, tobj);
-      })
-    },
-    endTween: function() {
-      var self = bannerAnim;
-      T.to(self.animBox, .5, {
-        alpha: 0,
-        onComplete: function() {
-          self.animBox.remove();
-          self.addMouseAnim()
-        }
-      });
-      self.imgBox.removeClass("fn-alpha-out")
-      self.imgBox.css("opacity", 1);
-
-    },
-    textTween: function() {
-      var self = this;
-      self.txtBox.removeClass("fn-hide");
-      for (var i = 0; i < self.txtBox.children().length; i++) {
-        var mc = self.txtBox.children().eq(i);
-        T.from(mc, .5, {
-          delay: .15 * i,
-          alpha: 0,
-          y: "80",
-          onComplete: function(mc) {
-            mc.removeAttr("style");
-          },
-          onCompleteParams: [mc]
-        })
-      }
-    },
-    addLine: function() {
-      var self = bannerAnim;
-      var a_lineBox = [],
-        end_num = 0;
-      setTimeout(function() {
-        self.textTween();
-      }, 500);
-
-      function addLine(i, j, lineBox) {
-        var t = new C.Shape();
-        if (j % 2) {
-          t.graphics.s(self.lineData[i].color[0]).ss(self.lineData[i].line).mt(0, 0).lt(0, self.lineData[i].h);
-          var at = Math.floor(j / 2);
-          t.x = self.lineData[i].w * at
-        } else {
-          t.graphics.s(self.lineData[i].color[0]).ss(self.lineData[i].line).mt(0, 0).lt(self.lineData[i].w, 0);
-          var at = j / 2;
-          t.y = self.lineData[i].h * at;
-        }
-        lineBox.addChild(t);
-        T.from(t, .5, {
-          alpha: 0
-        })
-      }
-
-      function addCirc(i, lineBox) {
-        end_num++;
-        if (self.lineData[i].circ.length > 0) {
-          for (var j = 0; j < self.lineData[i].circ.length; j++) {
-            var circ = new C.Shape();
-            circ.graphics.s(self.lineData[i].color[0]).ss(self.lineData[i].line).dc(self.lineData[i].circ[j].x + self.lineData[i].circ[j].r / 2, self.lineData[i].circ[j].y + self.lineData[i].circ[j].r / 2, self.lineData[i].circ[j].r / 2);
-            lineBox.addChild(circ);
-            T.from(circ, .5, {
-              alpha: 0
-            })
-          }
-        } else {
-          var circ = new C.Shape();
-          circ.graphics.s(self.lineData[i].color[0]).ss(self.lineData[i].line).dc(self.lineData[i].circ.x + self.lineData[i].circ.r / 2, self.lineData[i].circ.y + self.lineData[i].circ.r / 2, self.lineData[i].circ.r / 2);
-          lineBox.addChild(circ);
-          T.from(circ, .5, {
-            alpha: 0
-          })
-        }
-        if (end_num >= self.lineData.length) {
-          setTimeout(self.endTween, 500)
-        }
-      }
-
-      function tween(line, obj, i, j, lineBox, arr) {
-        var t = obj;
-        t.alpha = 0;
-        t.scale = 2;
-        t.ease = Power1.easeOut;
-        T.to(line, .5, t);
-        addLine(i, j, lineBox);
-        arr.push(j);
-        a_lineBox[i] = arr;
-        if (a_lineBox[i].length >= 4) {
-          addCirc(i, lineBox)
-        }
-      }
-      for (var i = 0; i < self.lineData.length; i++) {
-        var lineBox = new C.Container();
-        self.stage.addChild(lineBox);
-        lineBox.x = self.lineData[i].x;
-        lineBox.y = self.lineData[i].y + 125;
-        lineBox.rotation = self.lineData[i].rotate;
-        var arr = [];
-        //画外壳方形
-        for (var j = 0; j < 4; j++) {
-          var line, ma = Math.ceil(Math.random() * 2 - 1),
-            tweenobj;
-          if (j % 2) {
-            tweenobj = ma ? self.lineData[i].h * 2 : -self.lineData[i].h * 2;
-            line = self.glowLine(self.lineData[i].line, 0, self.lineData[i].h, self.lineData[i].color);
-            var t = Math.floor(j / 2);
-            line.x = self.lineData[i].w * t;
-            T.from(line, .5, {
-              alpha: 0,
-              y: tweenobj,
-              scale: 0,
-              delay: j * .1 + Math.random() * i * .1,
-              ease: Power1.easeIn,
-              onComplete: tween,
-              onCompleteParams: [line, {
-                y: -tweenobj
-              }, i, j, lineBox, arr]
-            });
-          } else {
-            tweenobj = ma ? self.lineData[i].w * 2 : -self.lineData[i].w * 2;
-            line = self.glowLine(self.lineData[i].line, self.lineData[i].w, 0, self.lineData[i].color);
-            var t = j / 2;
-            line.y = self.lineData[i].h * t;
-            T.from(line, .5, {
-              alpha: 0,
-              x: tweenobj,
-              scale: 0,
-              delay: j * .1 + Math.random() * i * .1,
-              ease: Power1.easeIn,
-              onComplete: tween,
-              onCompleteParams: [line, {
-                x: -tweenobj
-              }, i, j, lineBox, arr]
-            });
-          }
-          lineBox.addChild(line)
-        }
-      }
-    }
-  };
-  window.bannerAnim = bannerAnim;
-});

site/static/homeLoad.js

-/**
- * Created by jljsj on 15/6/3.
- */
-$(function() {
-  $.ajaxSetup({
-    cache: true
-  });
-  var loadData = [
-    "https://os.alipayobjects.com/rmsportal/PfhNcINWBAnMIWR.js", // easeljs-0.8.0.min.js
-    "https://os.alipayobjects.com/rmsportal/nGFyCGHAblMWsYE.js", // TweenMax.min.js
-    "/static/home.js",
-    "https://t.alipayobjects.com/images/T1CFtgXb0jXXXXXXXX.jpg"
-  ];
-  var animEndStr = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
-  var loadFunc = {
-    init: function() {
-      var self = this;
-      self.body = $("body");
-      self.header = $("#header") || $("header");
-      self.main = $(".main");
-      self.footer = $("#footer") || $("footer");
-      self.addLoad()
-    },
-    addLoad: function() {
-      var self = this;
-      self.loadBox = $("<div class='load-main-box'>" +
-        "<div class='load-box'>" +
-        "<em><img src='https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg' width='50' height='50'></em>" +
-        "<span>Ant Design</span>" +
-        "</div>" +
-        "<div class='load-bar'></div>" +
-        "</div>").appendTo(".banner-box");
-      self.loadBar = self.loadBox.find(".load-bar");
-      var loadText = self.loadBox.find("span"),
-        str = loadText.text(),
-        loadClass = ["yoyo-load0", "yoyo-load1", "yoyo-load2", "yoyo-load3", "yoyo-load4", "yoyo-load5"];
-      loadText.empty();
-
-      function c_random(num, arrlen) {
-        var arr = [];
-
-        function r(i) {
-          var t = Math.round(Math.random() * (num - 1));
-          if (t == arr[i - 1]) {
-            r(i);
-            return
-          }
-          arr.push(t)
-        }
-        for (var i = 0; i < arrlen; i++) {
-          r(i)
-        }
-        return arr;
-      }
-      var tarr = c_random(loadClass.length, str.length);
-      for (var i = 0; i < str.length; i++) {
-        var t = str[i];
-        if (t == " ") {
-          t = "&nbsp;"
-        }
-        var _class = "yoyo-x-left";
-        if (i > 0 && i < str.length - 1) {
-          _class = loadClass[tarr[i]]
-        }
-        if (i == str.length - 1) {
-          _class = 'yoyo-x-right'
-        }
-        loadText.append("<p class='" + _class + "'>" + t + "</p>")
-      }
-      self.load()
-    },
-    load: function() {
-      var self = this,
-        num = 0;
-
-      function endLoad() {
-        self.loadBox.addClass("load-out").one(animEndStr, function() {
-          self.loadBox.remove();
-          bannerAnim.init();
-        });
-      }
-
-      function getLoad() {
-        var str = loadData[num];
-        if (str.indexOf(".js") >= 0) {
-          $.getScript(str.indexOf('http') === 0 ? str : (rootUrl + str), function() {
-            num++;
-            self.loadBar.css("width", num / loadData.length * 100 + "%");
-            if (num >= loadData.length) {
-              setTimeout(endLoad, 300);
-            } else {
-              getLoad();
-            }
-          })
-        } else {
-          var img = new Image();
-          img.onload = img.onerror = function() {
-            num++;
-            self.loadBar.css("width", num / loadData.length * 100 + "%");
-            if (num >= loadData.length) {
-              setTimeout(endLoad, 300);
-            } else {
-              getLoad();
-            }
-          };
-          img.src = str;
-        }
-      }
-      getLoad();
-    }
-  };
-
-  $().ready(function() {
-    loadFunc.init()
-  });
-});

site/static/script.js

@@ -6,6 +6,7 @@ InstantClickChangeFns.push(function() {
     }, 0);
   }
 
+  $('.component-demos .icon-all').off('click');
   $('.component-demos .icon-all').on('click', function() {
     if ($(this).hasClass('expand')) {
       $(this).removeClass('expand');
@@ -49,6 +50,7 @@ InstantClickChangeFns.push(function() {
   hashChange();
 
   // 高亮侧边演示菜单
+  $(window).off('hashchange');
   $(window).on('hashchange', hashChange);
 
   // 移动 API 文档到演示下方
@@ -77,6 +79,7 @@ InstantClickChangeFns.push(function() {
   onScroll();
 
   // 滚动高亮
+  $(window).off('scroll');
   $(window).on('scroll', onScroll);
 
   // 添加上一页下一页

site/static/style.css

@@ -40,7 +40,7 @@ li {
 }
 
 a {
-  color: #00ABEA;
+  color: #2db7f5;
   text-decoration: none;
   transition: color .3s ease;
 }
@@ -56,11 +56,11 @@ a:hover {
 }
 
 ::selection {
-  background: #4BB8FF;
+  background: #2db7f5;
   color: #fff;
 }
 ::-moz-selection {
-  background: #4BB8FF;
+  background: #2db7f5;
   color: #fff;
 }
 
@@ -500,7 +500,7 @@ footer ul li > a {
   padding: 30px 80px 120px;
   border-left: 1px solid #e9e9e9;
   border-right: 1px solid #e9e9e9;
-  width: 80%;
+  width: 90%;
   height: 100%;
 }
 
@@ -508,7 +508,7 @@ footer ul li > a {
   color: #666;
   font-size: 14px;
   line-height: 1.8;
-  width: 80%;
+  width: 90%;
 }
 
 .highlight {
@@ -721,117 +721,6 @@ footer ul li > a {
   border-color: #2db7f5;
 }
 
-/****************************动画样式*********************************/
-.delay-mode {
-  animation-fill-mode: backwards !important;
-  -webkit-animation-fill-mode: backwards !important;
-}
-
-.no-delay {
-  animation-delay: 0s !important;
-  -webkit-animation-delay: 0s !important;
-  -moz-animation-delay: 0s !important;
-  -o-animation-delay: 0s !important;
-}
-
-.from-rotate-scale-m {
-  animation: mRotateScale .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  -webkit-animation: mRotateScale .4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
-
-.from-rotate-scale-l {
-  animation: lRotateScale .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  -webkit-animation: lRotateScale .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
-
-.from-scale-l {
-  animation: lScale .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  -webkit-animation: lScale .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
-
-.from-scale-m {
-  animation: mScale .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  -webkit-animation: mScale .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
-
-.from-x-left {
-  animation: xLeft .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  -webkit-animation: xLeft .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
-
-.from-x-right {
-  animation: xRight .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  -webkit-animation: xRight .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
-
-.from-y-top {
-  animation: yTop .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  -webkit-animation: yTop .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
-
-.from-y-bottom {
-  animation: yBottom .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  -webkit-animation: yBottom .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
-
-.to-img-blur {
-  opacity: 0;
-  animation: toImgBlur .5s ease-out;
-  -webkit-animation: toImgBlur .5s ease-out;
-  -moz-animation: toImgBlur .5s ease-out;
-  -o-animation: toImgBlur .5s ease-out;
-  -ms-animation: toImgBlur .5s ease-out;
-}
-
-.from-img-blur {
-  opacity: 1 !important;
-  animation: fromImgBlur .5s ease-out;
-  -webkit-animation: fromImgBlur .5s ease-out;
-  -moz-animation: fromImgBlur .5s ease-out;
-  -o-animation: fromImgBlur .5s ease-out;
-  -ms-animation: fromImgBlur .5s ease-out;
-}
-
-.alpha-out {
-  opacity: 0;
-  animation: alphaOut .5s ease-out;
-  -webkit-animation: alphaOut .5s ease-out;
-}
-
-.yoyo-x-right{
-    animation: xRightMatrixR 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate;
-    -webkit-animation: xRightMatrixR 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate;
-}
-.yoyo-x-left{
-    animation: xLeftMatrixR 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate;
-    -webkit-animation: xLeftMatrixR 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate;
-}
-
-.yoyo-load0{
-    animation: Load0 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate;
-    -webkit-animation: Load0 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate;
-}
-.yoyo-load1{
-    animation: Load1 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate;
-    -webkit-animation: Load1 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate;
-}
-.yoyo-load2{
-    animation: Load2 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate;
-    -webkit-animation: Load2 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate;
-}
-.yoyo-load3{
-    animation: Load3 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate;
-    -webkit-animation: Load3 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate;
-}
-.yoyo-load4{
-    animation: Load4 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate;
-    -webkit-animation: Load4 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate;
-}
-.yoyo-load5{
-    animation: Load5 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate;
-    -webkit-animation: Load5 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate;
-}
-
 /* autocomplete */
 .ui-select ul {
   outline: none;
@@ -865,835 +754,6 @@ footer ul li > a {
 }
 /* autocomplete end */
 
-@keyframes Load5 {
-    0% {
-        opacity: 0;
-        transform: translate(-30px,30px) rotate(-30deg) scale(1.5, 1.5);
-    }
-    20% {
-        opacity: 0;
-        transform: translate(-30px,30px) rotate(-30deg) scale(1.5, 1.5);
-    }
-
-    80% {
-        opacity: 1;
-        transform: translate(0,0) rotate(0deg) scale(1, 1);
-    }
-}
-
-@-webkit-keyframes Load5 {
-    0% {
-        opacity: 0;
-        -webkit-transform: translate(-30px,30px) rotate(-30deg) scale(1.5, 1.5);
-    }
-    20% {
-        opacity: 0;
-        -webkit-transform: translate(-30px,30px) rotate(-30deg) scale(1.5, 1.5);
-    }
-
-    80% {
-        opacity: 1;
-        -webkit-transform: translate(0,0) rotate(0deg) scale(1, 1);
-    }
-}
-@keyframes Load4 {
-    0% {
-        opacity: 0;
-        transform: translate(30px,-30px) rotate(-30deg) scale(1.5, 1.5);
-    }
-    20% {
-        opacity: 0;
-        transform: translate(30px,-30px) rotate(-30deg) scale(1.5, 1.5);
-    }
-
-    80% {
-        opacity: 1;
-        transform: translate(0,0) rotate(0deg) scale(1, 1);
-    }
-}
-
-@-webkit-keyframes Load4 {
-    0% {
-        opacity: 0;
-        -webkit-transform: translate(30px,-30px) rotate(-30deg) scale(1.5, 1.5);
-    }
-    20% {
-        opacity: 0;
-        -webkit-transform: translate(30px,-30px) rotate(-30deg) scale(1.5, 1.5);
-    }
-
-    80% {
-        opacity: 1;
-        -webkit-transform: translate(0,0) rotate(0deg) scale(1, 1);
-    }
-}
-@keyframes Load3 {
-    0% {
-        opacity: 0;
-        transform: translate(-30px,-30px) rotate(30deg) scale(1.5, 1.5);
-    }
-    20% {
-        opacity: 0;
-        transform: translate(-30px,-30px) rotate(30deg) scale(1.5, 1.5);
-    }
-
-    80% {
-        opacity: 1;
-        transform: translate(0,0) rotate(0deg) scale(1, 1);
-    }
-}
-
-@-webkit-keyframes Load3 {
-    0% {
-        opacity: 0;
-        -webkit-transform: translate(-30px,-30px) rotate(30deg) scale(1.5, 1.5);
-    }
-    20% {
-        opacity: 0;
-        -webkit-transform: translate(-30px,-30px) rotate(30deg) scale(1.5, 1.5);
-    }
-
-    80% {
-        opacity: 1;
-        -webkit-transform: translate(0,0) rotate(0deg) scale(1, 1);
-    }
-}
-@keyframes Load2 {
-    0% {
-        opacity: 0;
-        transform: translate(-30px,30px) rotate(-30deg) scale(1.5, 1.5);
-    }
-    20% {
-        opacity: 0;
-        transform: translate(-30px,30px) rotate(-30deg) scale(1.5, 1.5);
-    }
-
-    80% {
-        opacity: 1;
-        transform: translate(0,0) rotate(0deg) scale(1, 1);
-    }
-}
-
-@-webkit-keyframes Load2 {
-    0% {
-        opacity: 0;
-        -webkit-transform: translate(-30px,30px) rotate(-30deg) scale(1.5, 1.5);
-    }
-    20% {
-        opacity: 0;
-        -webkit-transform: translate(-30px,30px) rotate(-30deg) scale(1.5, 1.5);
-    }
-
-    80% {
-        opacity: 1;
-        -webkit-transform: translate(0,0) rotate(0deg) scale(1, 1);
-    }
-}
-@keyframes Load1 {
-    0% {
-        opacity: 0;
-        transform: translate(30px,30px) rotate(30deg) scale(1.5, 1.5);
-    }
-    20% {
-        opacity: 0;
-        transform: translate(30px,30px) rotate(30deg) scale(1.5, 1.5);
-    }
-
-    80% {
-        opacity: 1;
-        transform: translate(0,0) rotate(0deg) scale(1, 1);
-    }
-}
-
-@-webkit-keyframes Load1 {
-    0% {
-        opacity: 0;
-        -webkit-transform: translate(30px,30px) rotate(30deg) scale(1.5, 1.5);
-    }
-    20% {
-        opacity: 0;
-        -webkit-transform: translate(30px,30px) rotate(30deg) scale(1.5, 1.5);
-    }
-
-    80% {
-        opacity: 1;
-        -webkit-transform: translate(0,0) rotate(0deg) scale(1, 1);
-    }
-}
-
-@keyframes Load0 {
-    0% {
-        opacity: 0;
-        transform: translate(30px,-30px) rotate(-30deg) scale(1.5, 1.5);
-    }
-    20% {
-        opacity: 0;
-        transform: translate(30px,-30px) rotate(-30deg) scale(1.5, 1.5);
-    }
-
-    80% {
-        opacity: 1;
-        transform: translate(0,0) rotate(0deg) scale(1, 1);
-    }
-}
-
-@-webkit-keyframes Load0 {
-    0% {
-        opacity: 0;
-        -webkit-transform: translate(30px,-30px) rotate(-30deg) scale(1.5, 1.5);
-    }
-    20% {
-        opacity: 0;
-        -webkit-transform: translate(30px,-30px) rotate(-30deg) scale(1.5, 1.5);
-    }
-
-    80% {
-        opacity: 1;
-        -webkit-transform: translate(0,0) rotate(0deg) scale(1, 1);
-    }
-}
-
-@keyframes xLeftMatrixR {
-    0% {
-        opacity: 0;
-        transform: translateX(-50px) rotate(-30deg) scale(1.5, 1.5);
-    }
-    20% {
-        opacity: 0;
-        transform: translateX(-50px) rotate(-30deg) scale(1.5, 1.5);
-    }
-
-    80% {
-        opacity: 1;
-        transform: translateX(0px) rotate(0deg) scale(1, 1);
-    }
-}
-
-@-webkit-keyframes xLeftMatrixR {
-    0% {
-        opacity: 0;
-        -webkit-transform: translateX(-50px) rotate(-30deg) scale(1.5, 1.5);
-    }
-    20% {
-        opacity: 0;
-        -webkit-transform: translateX(-50px) rotate(-30deg) scale(1.5, 1.5);
-    }
-
-    80% {
-        opacity: 1;
-        -webkit-transform: translateX(0px) rotate(0deg) scale(1, 1);
-    }
-}
-
-@keyframes xRightMatrixR {
-    0% {
-        opacity: 0;
-        transform: translateX(50px) rotate(30deg) scale(1.5, 1.5);
-    }
-    20% {
-        opacity: 0;
-        transform: translateX(50px) rotate(30deg) scale(1.5, 1.5);
-    }
-
-    80% {
-        opacity: 1;
-        transform: translateX(0px) rotate(0deg) scale(1, 1);
-    }
-}
-
-@-webkit-keyframes xRightMatrixR {
-    0% {
-        opacity: 0;
-        -webkit-transform: translateX(50px)  rotate(30deg) scale(1.5, 1.5);
-    }
-    20% {
-        opacity: 0;
-        -webkit-transform: translateX(50px)  rotate(30deg) scale(1.5, 1.5);
-    }
-
-    80% {
-        opacity: 1;
-        -webkit-transform: translateX(0px)  rotate(0deg) scale(1, 1);
-    }
-}
-@keyframes fromImgBlur {
-  0% {
-    opacity: 0;
-    filter: blur(15px);
-  }
-
-  100% {
-    opacity: 1;
-    filter: blur(0px);
-  }
-}
-
-@-webkit-keyframes fromImgBlur {
-  0% {
-    opacity: 0;
-    -webkit-filter: blur(15px);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-filter: blur(0px);
-  }
-}
-
-@-moz-keyframes fromImgBlur {
-  0% {
-    opacity: 0;
-    -moz-filter: blur(15px);
-  }
-
-  100% {
-    opacity: 1;
-    -moz-filter: blur(0px);
-  }
-}
-
-@-ms-keyframes fromImgBlur {
-  0% {
-    opacity: 0;
-    -ms-filter: blur(15px);
-  }
-
-  100% {
-    opacity: 1;
-    -ms-filter: blur(0px);
-  }
-}
-
-@-o-keyframes fromImgBlur {
-  0% {
-    opacity: 0;
-    -o-filter: blur(15px);
-  }
-
-  100% {
-    opacity: 1;
-    -o-filter: blur(0px);
-  }
-}
-
-@keyframes toImgBlur {
-  0% {
-    opacity: 1;
-    filter: blur(0px);
-  }
-
-  100% {
-    opacity: 0;
-    filter: blur(15px);
-  }
-}
-
-@-webkit-keyframes toImgBlur {
-  0% {
-    opacity: 1;
-    -webkit-filter: blur(0px);
-  }
-
-  100% {
-    opacity: 0;
-    -webkit-filter: blur(15px);
-  }
-}
-
-@-moz-keyframes toImgBlur {
-  0% {
-    opacity: 1;
-    -moz-filter: blur(0px);
-  }
-
-  100% {
-    opacity: 0;
-    -moz-filter: blur(15px);
-  }
-}
-
-@-ms-keyframes toImgBlur {
-  0% {
-    opacity: 1;
-    -ms-filter: blur(0px);
-  }
-
-  100% {
-    opacity: 0;
-    -ms-filter: blur(15px);
-  }
-}
-
-@-o-keyframes toImgBlur {
-  0% {
-    opacity: 1;
-    -o-filter: blur(0px);
-  }
-
-  100% {
-    opacity: 0;
-    -o-filter: blur(15px);
-  }
-}
-
-@keyframes yBottom {
-  0% {
-    opacity: 0;
-    margin-top: 100px;
-  }
-
-  100% {
-    opacity: 1;
-    margin-top: 0px;
-  }
-}
-
-@-webkit-keyframes yBottom {
-  0% {
-    opacity: 0;
-    margin-top: 100px;
-  }
-
-  100% {
-    opacity: 1;
-    margin-top: 0px;
-  }
-}
-
-@keyframes yTop {
-  0% {
-    opacity: 0;
-    margin-top: -100px;
-  }
-
-  100% {
-    opacity: 1;
-    margin-top: 0px;
-  }
-}
-
-@-webkit-keyframes yTop {
-  0% {
-    opacity: 0;
-    margin-top: -100px;
-  }
-
-  100% {
-    opacity: 1;
-    margin-top: 0px;
-  }
-}
-
-@keyframes xRight {
-  0% {
-    opacity: 0;
-    margin-left: 100px;
-  }
-
-  100% {
-    opacity: 1;
-    margin-left: 0px;
-  }
-}
-
-@-webkit-keyframes xRight {
-  0% {
-    opacity: 0;
-    margin-left: 100px;
-  }
-
-  100% {
-    opacity: 1;
-    margin-right: 0px;
-  }
-}
-
-@keyframes xLeft {
-  0% {
-    opacity: 0;
-    margin-left: -100px;
-  }
-
-  100% {
-    opacity: 1;
-    margin-left: 0px;
-  }
-}
-
-@-webkit-keyframes xLeft {
-  0% {
-    opacity: 0;
-    margin-left: -100px;
-  }
-
-  100% {
-    opacity: 1;
-    margin-left: 0px;
-  }
-}
-
-@keyframes mScale {
-  0% {
-    opacity: 0;
-    transform: scale(0, 0);
-  }
-
-  100% {
-    opacity: 1;
-    transform: scale(1, 1);
-  }
-}
-
-@-webkit-keyframes mScale {
-  0% {
-    opacity: 0;
-    -webkit-transform: scale(0, 0);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: scale(1, 1);
-  }
-}
-
-@keyframes lScale {
-  0% {
-    opacity: 0;
-    transform: scale(1.5, 1.5);
-  }
-
-  100% {
-    opacity: 1;
-    transform: scale(1, 1);
-  }
-}
-
-@-webkit-keyframes lScale {
-  0% {
-    opacity: 0;
-    -webkit-transform: scale(1.5, 1.5);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: scale(1, 1);
-  }
-}
-
-@keyframes mRotateScale {
-  0% {
-    opacity: 0;
-    transform: rotate(90deg) scale(0, 0);
-  }
-
-  100% {
-    opacity: 1;
-    transform: rotate(0deg) scale(1, 1);
-  }
-}
-
-@-webkit-keyframes mRotateScale {
-  0% {
-    opacity: 0;
-    -webkit-transform: rotate(90deg) scale(0, 0);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: rotate(0deg) scale(1, 1);
-  }
-}
-
-@keyframes lRotateScale {
-  0% {
-    opacity: 0;
-    transform: rotate(90deg) scale(1.5, 1.5);
-  }
-
-  100% {
-    opacity: 1;
-    transform: rotate(0deg) scale(1, 1);
-  }
-}
-
-@-webkit-keyframes lRotateScale {
-  0% {
-    opacity: 0;
-    -webkit-transform: rotate(90deg) scale(1.5, 1.5);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: rotate(0deg) scale(1, 1);
-  }
-}
-
-@keyframes RotaeX {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@-webkit-keyframes RotaeX {
-  to {
-    -webkit-transform: rotate(360deg);
-  }
-}
-
-@keyframes scaleOut {
-  0% {
-    transform: scale(1, 1);
-  }
-
-  100% {
-    transform: scale(0, 0);
-  }
-}
-
-@-webkit-keyframes scaleOut {
-  0% {
-    -webkit-transform: scale(1, 1);
-    ;
-  }
-
-  100% {
-    -webkit-transform: scale(0, 0);
-    ;
-  }
-}
-
-@keyframes yTopMatrix {
-  0% {
-    opacity: 0;
-    transform: translateY(-50px);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0px);
-  }
-}
-
-@-webkit-keyframes yTopMatrix {
-  0% {
-    opacity: 0;
-    -webkit-transform: translateY(-50px);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: translateY(0px);
-  }
-}
-
-@keyframes yBottomMatrix {
-  0% {
-    opacity: 0;
-    transform: translateY(50px);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0px);
-  }
-}
-
-@-webkit-keyframes yBottomMatrix {
-  0% {
-    opacity: 0;
-    -webkit-transform: translateY(50px);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: translateY(0px);
-  }
-}
-
-@keyframes xLeftMatrix {
-  0% {
-    opacity: 0;
-    transform: translateX(-50px);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateX(0px);
-  }
-}
-
-@-webkit-keyframes xLeftMatrix {
-  0% {
-    opacity: 0;
-    -webkit-transform: translateX(-50px);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: translateX(0px);
-  }
-}
-
-@keyframes xRightMatrix {
-  0% {
-    opacity: 0;
-    transform: translateX(50px);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateX(0px);
-  }
-}
-
-@-webkit-keyframes xRightMatrix {
-  0% {
-    opacity: 0;
-    -webkit-transform: translateX(50px);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: translateX(0px);
-  }
-}
-
-@keyframes mainOut {
-  0% {
-    transform: rotateY(0deg);
-  }
-
-  100% {
-    transform: rotateY(90deg);
-  }
-}
-
-@-webkit-keyframes mainOut {
-  0% {
-    -webkit-transform: rotateY(0deg);
-  }
-
-  100% {
-    -webkit-transform: rotateY(90deg);
-  }
-}
-
-@keyframes alphaTo {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
-@-webkit-keyframes alphaTo {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes alphaOut {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-  }
-}
-
-@-webkit-keyframes alphaOut {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-  }
-}
-
-@-webkit-keyframes rotateCircle {
-  0% {
-    -webkit-transform-origin: 50% 50%;
-    -webkit-transform: rotate(0deg);
-  }
-
-  100% {
-    -webkit-transform-origin: 50% 50%;
-    -webkit-transform: rotate(360deg);
-  }
-}
-
-@keyframes rotateCircle {
-  0% {
-    transform-origin: 50% 50%;
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform-origin: 50% 50%;
-    transform: rotate(360deg);
-  }
-}
-
-@-webkit-keyframes rotateCircleBack {
-  0% {
-    -webkit-transform-origin: 50% 50%;
-    -webkit-transform: rotate(360deg);
-  }
-
-  100% {
-    -webkit-transform-origin: 50% 50%;
-    -webkit-transform: rotate(0deg);
-  }
-}
-
-@keyframes rotateCircleBack {
-  0% {
-    transform-origin: 50% 50%;
-    transform: rotate(360deg);
-  }
-
-  100% {
-    transform-origin: 50% 50%;
-    transform: rotate(0deg);
-  }
-}
-
-@keyframes loadTween {
-  0% {
-    transform: rotateY(0deg);
-  }
-
-  50% {
-    transform: rotateY(180deg);
-  }
-
-  100% {
-    transform: rotateX(-180deg);
-  }
-}
-
-@-webkit-keyframes loadTween {
-  0% {
-    -webkit-transform: rotateY(0deg);
-  }
-
-  50% {
-    -webkit-transform: rotateY(180deg);
-  }
-
-  100% {
-    -webkit-transform: rotateX(-180deg);
-  }
-}
-
 /***************************************************************************/
 .api-link {
   font-size: 16px;
@@ -1745,7 +805,7 @@ footer ul li > a {
 }
 
 .code-boxes-col-1-1 {
-  width: 80%;
+  width: 90%;
 }
 
 .code-boxes-col-2-1 {

site/theme.js

@@ -164,7 +164,7 @@ module.exports = function(nico) {
       });
     },
     rootDirectoryIn: function(directory, rootDirectories) {
-      return rootDirectories.indexOf(directory.split('/')[0]) >= 0;
+      return rootDirectories.indexOf(getRootDirectory(directory)) >= 0;
     },
     removeCodeBoxIdPrefix: function(id) {
       return id.split('-').slice(2).join('-');