优化页面流畅度
This commit is contained in:
结发受长生
parent
d42e02e75d
commit
b273d66640
@ -3,8 +3,7 @@
|
||||
<%- partial('_partial/head') %>
|
||||
<body>
|
||||
<div id="container" :class="{show:isCtnShow}" @click="hideSlider">
|
||||
<canvas id="anm-canvas" class="anm-canvas"></canvas>
|
||||
<div class="left-col" :class="{show:isShow}">
|
||||
<div class="left-col" >
|
||||
<%- partial('_partial/left-col', null, {cache: !config.relative_link}) %>
|
||||
<%- partial('_partial/live2d') %>
|
||||
</div>
|
||||
@ -21,9 +20,6 @@
|
||||
<%- partial('_partial/mobile-nav', null, {cache: !config.relative_link}) %>
|
||||
<div id="wrapper" class="body-wrap" v-pre>
|
||||
<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">
|
||||
<%- body %>
|
||||
</div>
|
||||
|
||||
41
themes/yilia/package-lock.json
generated
41
themes/yilia/package-lock.json
generated
@ -3591,8 +3591,7 @@
|
||||
"ansi-regex": {
|
||||
"version": "2.1.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"aproba": {
|
||||
"version": "1.2.0",
|
||||
@ -3613,14 +3612,12 @@
|
||||
"balanced-match": {
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"balanced-match": "^1.0.0",
|
||||
"concat-map": "0.0.1"
|
||||
@ -3635,20 +3632,17 @@
|
||||
"code-point-at": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"concat-map": {
|
||||
"version": "0.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"console-control-strings": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"core-util-is": {
|
||||
"version": "1.0.2",
|
||||
@ -3765,8 +3759,7 @@
|
||||
"inherits": {
|
||||
"version": "2.0.3",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"ini": {
|
||||
"version": "1.3.5",
|
||||
@ -3778,7 +3771,6 @@
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"number-is-nan": "^1.0.0"
|
||||
}
|
||||
@ -3793,7 +3785,6 @@
|
||||
"version": "3.0.4",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"brace-expansion": "^1.1.7"
|
||||
}
|
||||
@ -3801,14 +3792,12 @@
|
||||
"minimist": {
|
||||
"version": "0.0.8",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"minipass": {
|
||||
"version": "2.3.5",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"safe-buffer": "^5.1.2",
|
||||
"yallist": "^3.0.0"
|
||||
@ -3827,7 +3816,6 @@
|
||||
"version": "0.5.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"minimist": "0.0.8"
|
||||
}
|
||||
@ -3908,8 +3896,7 @@
|
||||
"number-is-nan": {
|
||||
"version": "1.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"object-assign": {
|
||||
"version": "4.1.1",
|
||||
@ -3921,7 +3908,6 @@
|
||||
"version": "1.4.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"wrappy": "1"
|
||||
}
|
||||
@ -4007,8 +3993,7 @@
|
||||
"safe-buffer": {
|
||||
"version": "5.1.2",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"safer-buffer": {
|
||||
"version": "2.1.2",
|
||||
@ -4044,7 +4029,6 @@
|
||||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"code-point-at": "^1.0.0",
|
||||
"is-fullwidth-code-point": "^1.0.0",
|
||||
@ -4064,7 +4048,6 @@
|
||||
"version": "3.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ansi-regex": "^2.0.0"
|
||||
}
|
||||
@ -4109,14 +4092,12 @@
|
||||
"wrappy": {
|
||||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"yallist": {
|
||||
"version": "3.0.3",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -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%;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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 { // 主标题
|
||||
|
||||
@ -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 }
|
||||
@ -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()
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user