优化页面流畅度

themes/yilia/source-src/css/article-main.scss

@@ -12,7 +12,7 @@
   border-width: 1px;
   border-style: solid;
   border-color: #fff #ddd;
-  background: $colorBg;
+  background: #{$colorBg}cc;
   @extend %trans;
   img{
     max-width: 100%;

themes/yilia/source-src/css/core/_animation.scss

@@ -257,22 +257,18 @@
 @keyframes leftIn {
   from {
     transform: translate(0, 0);
-    background:$colorBodyBg;
   }
   to {
     transform: translate(333px, 0);
-    background: none;
   }
 }
 
 @keyframes leftOut {
   from {
     transform: translate(333px, 0);
-    background: none;
   }
   to {
     transform: translate(0, 0);
-    background:$colorBodyBg;
   }
 }
 

themes/yilia/source-src/css/grid.scss

@@ -20,21 +20,19 @@ html, body, #container {
 #container{
 	position:relative;
 	min-height:100%;
-  background: linear-gradient(200deg,#5aa5c6,#a4854b);
   scroll-behavior: smooth;
 	-webkit-overflow-scrolling: touch;
+	background: $colorBodyBg url(http://photo.colorfulsweet.site/2019/08/29/4f8a91881d2a4.png) no-repeat;
+	background-size: contain;
+	background-position: right;
 	overflow-scrolling: touch;
-	.anm-canvas {
-		display: none;
-	}
   &.show {
-    overflow-y: hidden;
-    .anm-canvas {
-      display: block;
-      position: fixed;
-    }
+		overflow-y: hidden;
   }
 }
+body:not(.night) #container.show {
+	background: linear-gradient(200deg,#5aa5c6,#a4854b);
+}
 .body-wrap{
   padding-top: 30px;
   margin-bottom: 80px;
@@ -43,15 +41,14 @@ html, body, #container {
 	position:absolute;
 	right:0;
 	min-height:100%;
-	background:$colorBodyBg;
 	left: 300px;
   width: auto;
-	@extend %trans;
 	&.show {
     @extend %anmLeftIn;
 		.article {
-      transition: opacity .3s ease-in, background-color .3s ease-in;
-      opacity: 0.6 !important;
+			@extend %trans;
+      // transition: opacity .3s ease-in, background-color .3s ease-in;
+      opacity: 0.5 !important;
       pointer-events: none;
 		}
 	}

themes/yilia/source-src/css/mobile.scss

@@ -2,6 +2,9 @@
   padding-top: 0;
   margin-bottom: 0;
 }
+#container {
+  background: $colorBodyBg;
+}
 .left-col {
   display: none;
 }
@@ -117,6 +120,7 @@
   padding: 10px;
   border: 0;
   font-size: 16px;
+  background: #{$colorBg};
   .article-more-link {
     margin: 0;
   }

themes/yilia/source-src/css/night.scss

@@ -41,22 +41,12 @@ $textColor_night: #d5d5d5; // 文字颜色
 body.night {
   background: $mainBg_night;
   // 展开菜单之后的背景
-  #container {
-    background: none;
-  }
-  // 主背景
-  .mid-col {
-    background: $mainBg_night;
-    &.show {
-      @extend %anmLeftIn_night;
-    }
-    &.hide {
-      @extend %anmLeftOut_night;
-    }
+  #container, #container.show {
+    background-color: $mainBg_night;
   }
   // 文章区域
   .article{
-    background: $articleBg_night;
+    background: #{$articleBg_night}cc;
     border-color: $borderColor_night;
     color: $textColor_night;
     .article-title { // 主标题

themes/yilia/source-src/js/anm.js

@@ -1,92 +0,0 @@
-function init() {
-  var width, height, largeHeader, canvas, ctx, circles, target, animateHeader = true;
-
-  // Main
-  initHeader();
-  addListeners();
-
-  function initHeader() {
-    width = window.innerWidth;
-    height = window.innerHeight;
-    target = {x: 0, y: height};
-
-    largeHeader = document.getElementById('container');
-    largeHeader.style.height = height+'px';
-
-    canvas = document.getElementById('anm-canvas');
-    canvas.width = width;
-    canvas.height = height;
-    ctx = canvas.getContext('2d');
-
-    // create particles
-    circles = [];
-    for(var x = 0; x < width*0.5; x++) {
-      var c = new Circle();
-      circles.push(c);
-    }
-    animate();
-  }
-
-  // Event handling
-  function addListeners() {
-    window.addEventListener('scroll', scrollCheck);
-    window.addEventListener('resize', resize);
-  }
-
-  function scrollCheck() {
-    if(document.body.scrollTop > height) animateHeader = false;
-    else animateHeader = true;
-  }
-
-  function resize() {
-    width = window.innerWidth;
-    height = window.innerHeight;
-    largeHeader.style.height = height+'px';
-    canvas.width = width;
-    canvas.height = height;
-  }
-
-  function animate() {
-    if(animateHeader) {
-      ctx.clearRect(0,0,width,height);
-      for(var i in circles) {
-        circles[i].draw();
-      }
-    }
-    requestAnimationFrame(animate);
-  }
-
-  // Canvas manipulation
-  function Circle() {
-    var _this = this;
-
-    // constructor
-    (function() {
-      _this.pos = {};
-      init();
-      //console.log(_this);
-    })();
-
-    function init() {
-      _this.pos.x = Math.random()*width;
-      _this.pos.y = height+Math.random()*100;
-      _this.alpha = 0.1+Math.random()*0.3;
-      _this.scale = 0.1+Math.random()*0.3;
-      _this.velocity = Math.random();
-    }
-
-    this.draw = function() {
-      if(_this.alpha <= 0) {
-        init();
-      }
-      _this.pos.y -= _this.velocity;
-      _this.alpha -= 0.0005;
-      ctx.beginPath();
-      ctx.arc(_this.pos.x, _this.pos.y, _this.scale*10, 0, 2 * Math.PI, false);
-      ctx.fillStyle = 'rgba(255,255,255,'+ _this.alpha+')';
-      ctx.fill();
-    };
-  }
-}
-
-export default { init }

themes/yilia/source-src/js/slider.js

@@ -1,12 +1,6 @@
-// 动画
-import Anm from './anm'
-// 浏览器判断
-import Browser from './browser'
-
 import axios from 'axios'
 import Vue from '../lib/vue/vue.min'
 import waifuTips from '../config/waifu-tip.json'
-const isMobile = (Browser.versions.mobile && window.screen.width < 800)
 
 function setScrollZero() {
   let $sct = document.querySelectorAll('.tools-section')
@@ -284,8 +278,4 @@ const waifuTools = {
     // 打开全文检索Modal
     vm.openFullTextSearch()
   }
-}
-
-if (!isMobile) {
-  Anm.init()
-}
+}