sookie/blog-web
1
0
Fork 0
Code Issues 12 Pull Requests Projects Releases Wiki Activity

优化页面流畅度

Browse Source
This commit is contained in:
结发受长生 2019-08-29 11:40:30 +08:00
parent d42e02e75d
commit b273d66640
9 changed files with 31 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
themes/yilia/layout/layout.ejs
View File

@ -3,8 +3,7 @@
<%- partial('_partial/head') %> <%- partial('_partial/head') %>
<body> <body>
<div id="container" :class="{show:isCtnShow}" @click="hideSlider"> <div id="container" :class="{show:isCtnShow}" @click="hideSlider">
<canvas id="anm-canvas" class="anm-canvas"></canvas> <div class="left-col" >
<div class="left-col" :class="{show:isShow}">
<%- partial('_partial/left-col', null, {cache: !config.relative_link}) %> <%- partial('_partial/left-col', null, {cache: !config.relative_link}) %>
<%- partial('_partial/live2d') %> <%- partial('_partial/live2d') %>
</div> </div>
@ -21,9 +20,6 @@
<%- partial('_partial/mobile-nav', null, {cache: !config.relative_link}) %> <%- partial('_partial/mobile-nav', null, {cache: !config.relative_link}) %>
<div id="wrapper" class="body-wrap" v-pre> <div id="wrapper" class="body-wrap" v-pre>
<div class="menu-l"> <div class="menu-l">
<div class="canvas-wrap">
<canvas data-colors="#eaeaea" data-sectionHeight="100" data-contentId="js-content" class="anm-canvas"></canvas>
</div>
<div id="js-content" class="content-ll"> <div id="js-content" class="content-ll">
<%- body %> <%- body %>
</div> </div>

41
themes/yilia/package-lock.json generated
View File

@ -3591,8 +3591,7 @@
"ansi-regex": { "ansi-regex": {
"version": "2.1.1", "version": "2.1.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"aproba": { "aproba": {
"version": "1.2.0", "version": "1.2.0",
@ -3613,14 +3612,12 @@
"balanced-match": { "balanced-match": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"balanced-match": "^1.0.0", "balanced-match": "^1.0.0",
"concat-map": "0.0.1" "concat-map": "0.0.1"
@ -3635,20 +3632,17 @@
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
@ -3765,8 +3759,7 @@
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.3",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
@ -3778,7 +3771,6 @@
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
@ -3793,7 +3785,6 @@
"version": "3.0.4", "version": "3.0.4",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"brace-expansion": "^1.1.7" "brace-expansion": "^1.1.7"
} }
@ -3801,14 +3792,12 @@
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"minipass": { "minipass": {
"version": "2.3.5", "version": "2.3.5",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.2", "safe-buffer": "^5.1.2",
"yallist": "^3.0.0" "yallist": "^3.0.0"
@ -3827,7 +3816,6 @@
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
@ -3908,8 +3896,7 @@
"number-is-nan": { "number-is-nan": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
@ -3921,7 +3908,6 @@
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
@ -4007,8 +3993,7 @@
"safe-buffer": { "safe-buffer": {
"version": "5.1.2", "version": "5.1.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"safer-buffer": { "safer-buffer": {
"version": "2.1.2", "version": "2.1.2",
@ -4044,7 +4029,6 @@
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",
@ -4064,7 +4048,6 @@
"version": "3.0.1", "version": "3.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"ansi-regex": "^2.0.0" "ansi-regex": "^2.0.0"
} }
@ -4109,14 +4092,12 @@
"wrappy": { "wrappy": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"yallist": { "yallist": {
"version": "3.0.3", "version": "3.0.3",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
} }
} }
}, },

2
themes/yilia/source-src/css/article-main.scss
View File

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

4
themes/yilia/source-src/css/core/_animation.scss
View File

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

23
themes/yilia/source-src/css/grid.scss
View File

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

4
themes/yilia/source-src/css/mobile.scss
View File

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

16
themes/yilia/source-src/css/night.scss
View File

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

92
themes/yilia/source-src/js/anm.js
View File

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

12
themes/yilia/source-src/js/slider.js
View File

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