This commit is contained in:
Van
parent
7788ba3799
commit
0824cd7eff
File diff suppressed because one or more lines are too long
|
|
@ -31,7 +31,7 @@
|
|||
$fade-lighter: rgba(255, 255, 255, .8) !default;
|
||||
$gray: #738a94 !default;
|
||||
$black: #15171a !default;
|
||||
$black-bg: #090a0b !default;
|
||||
$black-bg: #232323 !default;
|
||||
$link: rgb(119, 182, 255) !default;
|
||||
|
||||
body {
|
||||
|
|
@ -106,6 +106,58 @@ a {
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes bounceInLeft {
|
||||
from {
|
||||
-webkit-transform-origin: left bottom;
|
||||
transform-origin: left bottom;
|
||||
-webkit-transform: rotate3d(0, 0, 1, -45deg);
|
||||
transform: rotate3d(0, 0, 1, -45deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform-origin: left bottom;
|
||||
transform-origin: left bottom;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bounceOutLeft {
|
||||
20% {
|
||||
opacity: 1;
|
||||
transform: translate3d(20px, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translate3d(-2000px, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes beating {
|
||||
0% {
|
||||
transform: scale(1)
|
||||
}
|
||||
|
||||
20% {
|
||||
transform: scale(1.6)
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: scale(1)
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1.6)
|
||||
}
|
||||
|
||||
70%,to {
|
||||
transform: scale(1)
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
max-width: 1040px;
|
||||
margin: 0 auto;
|
||||
|
|
@ -114,6 +166,7 @@ a {
|
|||
|
||||
.header {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
#canvas {
|
||||
position: absolute;
|
||||
|
|
@ -171,6 +224,7 @@ a {
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__h1 {
|
||||
|
|
@ -213,6 +267,10 @@ a {
|
|||
position: absolute;
|
||||
bottom: 10px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
//&__nav {
|
||||
|
|
@ -241,23 +299,144 @@ a {
|
|||
//}
|
||||
}
|
||||
|
||||
.footer {
|
||||
font-size: 13px;
|
||||
padding: 20px 0;
|
||||
background-color: $black-bg;
|
||||
color: #fff;
|
||||
|
||||
a {
|
||||
color: $fade-lighter;
|
||||
.side {
|
||||
&__menu {
|
||||
position: fixed;
|
||||
z-index: 2;
|
||||
border: 1px solid rgba(255, 255, 255, 0.6);
|
||||
border-radius: 3px;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
color: #fff;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
transition: left .3s ease;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
&--edge {
|
||||
left: -3px;
|
||||
font-size: 0;
|
||||
background-color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.fn__right {
|
||||
text-align: right;
|
||||
&__main {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
z-index: 3;
|
||||
transition: all 1s ease;
|
||||
|
||||
&--show {
|
||||
opacity: 1;
|
||||
|
||||
.side__bg {
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.side__panel {
|
||||
animation-name: bounceInLeft;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__bg {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 3;
|
||||
transition: background-color 1s ease;
|
||||
}
|
||||
|
||||
&__panel {
|
||||
width: 280px;
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
background: #000 url(../images/side-bg.gif) top / contain no-repeat;
|
||||
animation-name: bounceOutLeft;
|
||||
animation-duration: 1s;
|
||||
animation-fill-mode: both;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
z-index: 4;
|
||||
top: 0;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__top {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
cursor: pointer;
|
||||
color: #555;
|
||||
opacity: .5;
|
||||
transition: all .5s ease-out;
|
||||
&--bottom {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
font-size: 12px;
|
||||
padding: 20px 0;
|
||||
background-color: $black-bg;
|
||||
color: #888;
|
||||
margin-top: 200px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
|
||||
.wrapper {
|
||||
position: relative;
|
||||
&:after {
|
||||
background: url(../images/footer.png) no-repeat center center / cover;
|
||||
position: absolute;
|
||||
bottom: 88px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
&__heart {
|
||||
display: inline-block;
|
||||
animation: beating 1s infinite;
|
||||
animation-timing-function: ease-out;
|
||||
margin: 0 3px 5px 5px;
|
||||
}
|
||||
|
||||
svg {
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #2daebf;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: #f60;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -18,37 +18,28 @@
|
|||
|
||||
-->
|
||||
<footer class="footer">
|
||||
<div class="wrapper fn__clear">
|
||||
<div class="fn__left">
|
||||
© ${year}
|
||||
<a href="${servePath}">${blogTitle}</a>
|
||||
${footerContent} •
|
||||
Powered by <a href="https://solo.b3log.org" target="_blank">Solo</a>
|
||||
<br>
|
||||
Theme <a rel="friend" href="https://github.com/b3log/solo-skins" target="_blank">${skinDirName}</a>
|
||||
<sup>[<a href="https://github.com/TryGhost/Casper" target="_blank">ref</a>]</sup>
|
||||
by <a href="http://vanessa.b3log.org" target="_blank">Vanessa</a>
|
||||
</div>
|
||||
<div class="fn__right">
|
||||
<a href="${servePath}/tags.html" rel="section">
|
||||
${allTagsLabel}
|
||||
</a>
|
||||
•
|
||||
<a href="${servePath}/archives.html">
|
||||
${archiveLabel}
|
||||
</a>
|
||||
•
|
||||
<a rel="archive" href="${servePath}/links.html">
|
||||
${linkLabel}
|
||||
</a>
|
||||
<br>
|
||||
${statistic.statisticPublishedBlogArticleCount} ${articleLabel}
|
||||
${statistic.statisticPublishedBlogCommentCount} ${commentLabel}
|
||||
${statistic.statisticBlogViewCount} ${viewLabel}
|
||||
${onlineVisitorCnt} ${onlineVisitorLabel}
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
© ${year}
|
||||
<a href="${servePath}">${blogTitle}</a>
|
||||
${footerContent}
|
||||
<span class="footer__heart">❤️</span>
|
||||
Powered by <a href="https://solo.b3log.org" target="_blank">Solo</a>
|
||||
<br>
|
||||
Theme <a rel="friend" href="https://github.com/b3log/solo-skins" target="_blank">${skinDirName}</a>
|
||||
<sup>[<a href="https://www.cnblogs.com/jajian" target="_blank">ref</a>]</sup>
|
||||
by <a href="http://vanessa.b3log.org" target="_blank">Vanessa</a> <br>
|
||||
<#include "../../common-template/macro-user_site.ftl">
|
||||
<@userSite dir=""></@userSite> <br>
|
||||
${statistic.statisticPublishedBlogArticleCount} ${articleLabel}
|
||||
${statistic.statisticPublishedBlogCommentCount} ${commentLabel}
|
||||
${statistic.statisticBlogViewCount} ${viewLabel}
|
||||
${onlineVisitorCnt} ${onlineVisitorLabel}
|
||||
</div>
|
||||
</footer>
|
||||
<svg class="side__top" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
|
||||
<path d="M26.562 13.958c0 0.72 0.583 1.303 1.303 1.303s1.303-0.583 1.303-1.303v0c0-0.72-0.583-1.303-1.303-1.303s-1.303 0.583-1.303 1.303v0zM23.305 10.7c0 0 0 0 0 0 0 0.72 0.583 1.303 1.303 1.303s1.303-0.583 1.303-1.303c0-0 0-0 0-0v0c0-0 0-0 0-0 0-0.72-0.583-1.303-1.303-1.303s-1.303 0.583-1.303 1.303c0 0 0 0 0 0v0zM20.022 7.417c0 0 0 0 0 0 0 0.72 0.583 1.303 1.303 1.303s1.303-0.583 1.303-1.303c0-0 0-0 0-0v0c0-0 0-0 0-0 0-0.72-0.583-1.303-1.303-1.303s-1.303 0.583-1.303 1.303c0 0 0 0 0 0v0zM29.67 0h-27.339c-0.677 0-1.228 0.551-1.228 1.228s0.551 1.228 1.228 1.228h11.151l-10.725 10.725c-0.476 0.476-0.476 1.253 0 1.729 0.226 0.226 0.551 0.351 0.852 0.351s0.626-0.125 0.852-0.351l10.074-10.074v25.936c0 0.677 0.551 1.228 1.228 1.228s1.228-0.551 1.228-1.228v-26.011c0.476 0.426 1.203 0.426 1.679-0.050s0.476-1.253 0-1.729l-0.576-0.576h11.577c0.677 0 1.228-0.551 1.228-1.228 0-0.626-0.551-1.178-1.228-1.178z"></path>
|
||||
</svg>
|
||||
|
||||
|
||||
<script type="text/javascript" src="${staticServePath}/js/lib/compress/pjax.min.js" charset="utf-8"></script>
|
||||
<script type="text/javascript" src="${staticServePath}/js/common${miniPostfix}.js?${staticResourceVersion}"
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
|
|
@ -27,6 +27,9 @@
|
|||
canvas = document.getElementById('canvas');
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
canvas.style.position = 'absolute';
|
||||
canvas.style.left = '0';
|
||||
canvas.style.bottom = '0';
|
||||
ctx = canvas.getContext('2d');
|
||||
|
||||
// create circles
|
||||
|
|
@ -48,19 +51,9 @@
|
|||
|
||||
// Event handling
|
||||
function addListeners() {
|
||||
window.addEventListener('scroll', scrollCheck, false);
|
||||
window.addEventListener('resize', resize, false);
|
||||
}
|
||||
|
||||
function scrollCheck() {
|
||||
if (document.body.scrollTop > height) {
|
||||
animateHeader = false;
|
||||
}
|
||||
else {
|
||||
animateHeader = true;
|
||||
}
|
||||
}
|
||||
|
||||
function resize() {
|
||||
width = container.clientWidth;
|
||||
height = container.clientHeight;
|
||||
|
|
@ -126,4 +119,450 @@
|
|||
};
|
||||
}
|
||||
}
|
||||
})(jQuery);
|
||||
})(jQuery);
|
||||
|
||||
/**
|
||||
* Ribbons Class File.
|
||||
* Creates low-poly ribbons background effect inside a target container.
|
||||
*/
|
||||
(function( name, factory )
|
||||
{
|
||||
if( typeof window === "object" )
|
||||
{
|
||||
window[ name ] = factory();
|
||||
}
|
||||
|
||||
})( "Ribbons", function()
|
||||
{
|
||||
var _w = window,
|
||||
_b = document.body,
|
||||
_d = document.documentElement;
|
||||
|
||||
// random helper
|
||||
var random = function()
|
||||
{
|
||||
if( arguments.length === 1 ) // only 1 argument
|
||||
{
|
||||
if( Array.isArray( arguments[0] ) ) // extract index from array
|
||||
{
|
||||
var index = Math.round( random( 0, arguments[0].length - 1 ) );
|
||||
return arguments[0][ index ];
|
||||
}
|
||||
return random( 0, arguments[0] ); // assume numeric
|
||||
}
|
||||
else if( arguments.length === 2 ) // two arguments range
|
||||
{
|
||||
return Math.random() * ( arguments[1] - arguments[0] ) + arguments[0];
|
||||
}
|
||||
return 0; // default
|
||||
};
|
||||
|
||||
// screen helper
|
||||
var screenInfo = function( e )
|
||||
{
|
||||
var width = Math.max( 0, _w.innerWidth || _d.clientWidth || _b.clientWidth || 0 ),
|
||||
height = Math.max( 0, _w.innerHeight || _d.clientHeight || _b.clientHeight || 0 ),
|
||||
scrollx = Math.max( 0, _w.pageXOffset || _d.scrollLeft || _b.scrollLeft || 0 ) - ( _d.clientLeft || 0 ),
|
||||
scrolly = Math.max( 0, _w.pageYOffset || _d.scrollTop || _b.scrollTop || 0 ) - ( _d.clientTop || 0 );
|
||||
|
||||
return {
|
||||
width : width,
|
||||
height : height,
|
||||
ratio : width / height,
|
||||
centerx : width / 2,
|
||||
centery : height / 2,
|
||||
scrollx : scrollx,
|
||||
scrolly : scrolly,
|
||||
};
|
||||
};
|
||||
|
||||
// mouse/input helper
|
||||
var mouseInfo = function( e )
|
||||
{
|
||||
var screen = screenInfo( e ),
|
||||
mousex = e ? Math.max( 0, e.pageX || e.clientX || 0 ) : 0,
|
||||
mousey = e ? Math.max( 0, e.pageY || e.clientY || 0 ) : 0;
|
||||
|
||||
return {
|
||||
mousex : mousex,
|
||||
mousey : mousey,
|
||||
centerx : mousex - ( screen.width / 2 ),
|
||||
centery : mousey - ( screen.height / 2 ),
|
||||
};
|
||||
};
|
||||
|
||||
// point object
|
||||
var Point = function( x, y )
|
||||
{
|
||||
this.x = 0;
|
||||
this.y = 0;
|
||||
this.set( x, y );
|
||||
};
|
||||
Point.prototype = {
|
||||
constructor: Point,
|
||||
|
||||
set: function( x, y )
|
||||
{
|
||||
this.x = ( x || 0 );
|
||||
this.y = ( y || 0 );
|
||||
},
|
||||
copy: function( point )
|
||||
{
|
||||
this.x = ( point.x || 0 );
|
||||
this.y = ( point.y || 0 );
|
||||
return this;
|
||||
},
|
||||
multiply: function( x, y )
|
||||
{
|
||||
this.x *= ( x || 1 );
|
||||
this.y *= ( y || 1 );
|
||||
return this;
|
||||
},
|
||||
divide: function( x, y )
|
||||
{
|
||||
this.x /= ( x || 1 );
|
||||
this.y /= ( y || 1 );
|
||||
return this;
|
||||
},
|
||||
add: function( x, y )
|
||||
{
|
||||
this.x += ( x || 0 );
|
||||
this.y += ( y || 0 );
|
||||
return this;
|
||||
},
|
||||
subtract: function( x, y )
|
||||
{
|
||||
this.x -= ( x || 0 );
|
||||
this.y -= ( y || 0 );
|
||||
return this;
|
||||
},
|
||||
clampX: function( min, max )
|
||||
{
|
||||
this.x = Math.max( min, Math.min( this.x, max ) );
|
||||
return this;
|
||||
},
|
||||
clampY: function( min, max )
|
||||
{
|
||||
this.y = Math.max( min, Math.min( this.y, max ) );
|
||||
return this;
|
||||
},
|
||||
flipX: function()
|
||||
{
|
||||
this.x *= -1;
|
||||
return this;
|
||||
},
|
||||
flipY: function()
|
||||
{
|
||||
this.y *= -1;
|
||||
return this;
|
||||
},
|
||||
};
|
||||
|
||||
// class constructor
|
||||
var Factory = function( options )
|
||||
{
|
||||
this._canvas = null;
|
||||
this._context = null;
|
||||
this._sto = null;
|
||||
this._width = 0;
|
||||
this._height = 0;
|
||||
this._scroll = 0;
|
||||
this._ribbons = [];
|
||||
this._options = {
|
||||
// ribbon color HSL saturation amount
|
||||
colorSaturation: "80%",
|
||||
// ribbon color HSL brightness amount
|
||||
colorBrightness: "60%",
|
||||
// ribbon color opacity amount
|
||||
colorAlpha: 0.65,
|
||||
// how fast to cycle through colors in the HSL color space
|
||||
colorCycleSpeed : 6,
|
||||
// where to start from on the Y axis on each side (top|min, middle|center, bottom|max, random)
|
||||
verticalPosition : "center",
|
||||
// how fast to get to the other side of the screen
|
||||
horizontalSpeed : 150,
|
||||
// how many ribbons to keep on screen at any given time
|
||||
ribbonCount: 3,
|
||||
// add stroke along with ribbon fill colors
|
||||
strokeSize: 0,
|
||||
// move ribbons vertically by a factor on page scroll
|
||||
parallaxAmount : -0.5,
|
||||
// add animation effect to each ribbon section over time
|
||||
animateSections : true,
|
||||
};
|
||||
this._onDraw = this._onDraw.bind( this );
|
||||
this._onResize = this._onResize.bind( this );
|
||||
this._onScroll = this._onScroll.bind( this );
|
||||
this.setOptions( options );
|
||||
this.init();
|
||||
};
|
||||
|
||||
// class prototype
|
||||
Factory.prototype = {
|
||||
constructor: Factory,
|
||||
|
||||
// Set and merge local options
|
||||
setOptions: function( options )
|
||||
{
|
||||
if( typeof options === "object" )
|
||||
{
|
||||
for( var key in options )
|
||||
{
|
||||
if( options.hasOwnProperty( key ) )
|
||||
{
|
||||
this._options[ key ] = options[ key ];
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// Initialize the ribbons effect
|
||||
init: function()
|
||||
{
|
||||
try
|
||||
{
|
||||
this._canvas = document.createElement( "canvas" );
|
||||
this._canvas.style["display"] = "block";
|
||||
this._canvas.style["position"] = "fixed";
|
||||
this._canvas.style["margin"] = "0";
|
||||
this._canvas.style["padding"] = "0";
|
||||
this._canvas.style["border"] = "0";
|
||||
this._canvas.style["outline"] = "0";
|
||||
this._canvas.style["left"] = "0";
|
||||
this._canvas.style["top"] = "0";
|
||||
this._canvas.style["width"] = "100%";
|
||||
this._canvas.style["height"] = "100%";
|
||||
this._canvas.style["z-index"] = "-1";
|
||||
this._onResize();
|
||||
|
||||
this._context = this._canvas.getContext( "2d" );
|
||||
this._context.clearRect( 0, 0, this._width, this._height );
|
||||
this._context.globalAlpha = this._options.colorAlpha;
|
||||
|
||||
window.addEventListener( "resize", this._onResize );
|
||||
document.body.appendChild( this._canvas );
|
||||
}
|
||||
catch( e ) {
|
||||
console.warn( "Canvas Context Error: " + e.toString() );
|
||||
return;
|
||||
}
|
||||
this._onDraw();
|
||||
},
|
||||
|
||||
// Create a new random ribbon and to the list
|
||||
addRibbon: function()
|
||||
{
|
||||
// movement data
|
||||
var dir = ( Math.round( random( 1, 9 ) ) > 5 ) ? "right" : "left",
|
||||
stop = 1000,
|
||||
hide = 200,
|
||||
min = 0 - hide,
|
||||
max = this._width + hide,
|
||||
movex = 0,
|
||||
movey = 0,
|
||||
startx = ( dir === "right" ) ? min : max,
|
||||
starty = Math.round( random( 0, this._height ) );
|
||||
|
||||
// asjust starty based on options
|
||||
if( /^(top|min)$/i.test( this._options.verticalPosition ) )
|
||||
{
|
||||
starty = 0 + hide;
|
||||
}
|
||||
else if( /^(middle|center)$/i.test( this._options.verticalPosition ) )
|
||||
{
|
||||
starty = ( this._height / 2 );
|
||||
}
|
||||
else if( /^(bottom|max)$/i.test( this._options.verticalPosition ) )
|
||||
{
|
||||
starty = this._height - hide;
|
||||
}
|
||||
|
||||
// ribbon sections data
|
||||
var ribbon = [],
|
||||
point1 = new Point( startx, starty ),
|
||||
point2 = new Point( startx, starty ),
|
||||
point3 = null,
|
||||
color = Math.round( random( 0, 360 ) ),
|
||||
delay = 0;
|
||||
|
||||
// buils ribbon sections
|
||||
while( true )
|
||||
{
|
||||
if( stop <= 0 ) break; stop--;
|
||||
|
||||
movex = Math.round( ( Math.random() * 1 - 0.2 ) * this._options.horizontalSpeed );
|
||||
movey = Math.round( ( Math.random() * 1 - 0.5 ) * ( this._height * 0.25 ) );
|
||||
|
||||
point3 = new Point();
|
||||
point3.copy( point2 );
|
||||
|
||||
if( dir === "right" )
|
||||
{
|
||||
point3.add( movex, movey );
|
||||
if( point2.x >= max ) break;
|
||||
}
|
||||
else if( dir === "left" )
|
||||
{
|
||||
point3.subtract( movex, movey );
|
||||
if( point2.x <= min ) break;
|
||||
}
|
||||
// point3.clampY( 0, this._height );
|
||||
|
||||
ribbon.push({ // single ribbon section
|
||||
point1 : new Point( point1.x, point1.y ),
|
||||
point2 : new Point( point2.x, point2.y ),
|
||||
point3 : point3,
|
||||
color : color,
|
||||
delay : delay,
|
||||
dir : dir,
|
||||
alpha : 0,
|
||||
phase : 0,
|
||||
});
|
||||
|
||||
point1.copy( point2 );
|
||||
point2.copy( point3 );
|
||||
|
||||
delay += 4;
|
||||
color += this._options.colorCycleSpeed;
|
||||
}
|
||||
this._ribbons.push( ribbon );
|
||||
},
|
||||
|
||||
// Draw single section
|
||||
_drawRibbonSection: function( section )
|
||||
{
|
||||
if( section )
|
||||
{
|
||||
if( section.phase >= 1 && section.alpha <= 0 )
|
||||
{
|
||||
return true; // done
|
||||
}
|
||||
if( section.delay <= 0 )
|
||||
{
|
||||
section.phase += 0.02;
|
||||
section.alpha = Math.sin( section.phase ) * 1;
|
||||
section.alpha = ( section.alpha <= 0 ) ? 0 : section.alpha;
|
||||
section.alpha = ( section.alpha >= 1 ) ? 1 : section.alpha;
|
||||
|
||||
if( this._options.animateSections )
|
||||
{
|
||||
var mod = ( Math.sin( 1 + section.phase * Math.PI / 2 ) * 0.1 );
|
||||
|
||||
if( section.dir === "right" )
|
||||
{
|
||||
section.point1.add( mod, 0 );
|
||||
section.point2.add( mod, 0 );
|
||||
section.point3.add( mod, 0 );
|
||||
} else {
|
||||
section.point1.subtract( mod, 0 );
|
||||
section.point2.subtract( mod, 0 );
|
||||
section.point3.subtract( mod, 0 );
|
||||
}
|
||||
section.point1.add( 0, mod );
|
||||
section.point2.add( 0, mod );
|
||||
section.point3.add( 0, mod );
|
||||
}
|
||||
}
|
||||
else { section.delay -= 0.5; }
|
||||
|
||||
var s = this._options.colorSaturation,
|
||||
l = this._options.colorBrightness,
|
||||
c = "hsla("+ section.color +", "+ s +", "+ l +", "+ section.alpha +" )";
|
||||
|
||||
this._context.save();
|
||||
|
||||
if( this._options.parallaxAmount !== 0 )
|
||||
{
|
||||
this._context.translate( 0, this._scroll * this._options.parallaxAmount );
|
||||
}
|
||||
this._context.beginPath();
|
||||
this._context.moveTo( section.point1.x, section.point1.y );
|
||||
this._context.lineTo( section.point2.x, section.point2.y );
|
||||
this._context.lineTo( section.point3.x, section.point3.y );
|
||||
this._context.fillStyle = c;
|
||||
this._context.fill();
|
||||
|
||||
if( this._options.strokeSize > 0 )
|
||||
{
|
||||
this._context.lineWidth = this._options.strokeSize;
|
||||
this._context.strokeStyle = c;
|
||||
this._context.lineCap = "round";
|
||||
this._context.stroke();
|
||||
}
|
||||
this._context.restore();
|
||||
}
|
||||
return false; // not done yet
|
||||
},
|
||||
|
||||
// Draw ribbons
|
||||
_onDraw: function()
|
||||
{
|
||||
// cleanup on ribbons list to rtemoved finished ribbons
|
||||
for( var i = 0, t = this._ribbons.length; i < t; ++i )
|
||||
{
|
||||
if( !this._ribbons[ i ] )
|
||||
{
|
||||
this._ribbons.splice( i, 1 );
|
||||
}
|
||||
}
|
||||
|
||||
// draw new ribbons
|
||||
this._context.clearRect( 0, 0, this._width, this._height );
|
||||
|
||||
for( var a = 0; a < this._ribbons.length; ++a ) // single ribbon
|
||||
{
|
||||
var ribbon = this._ribbons[ a ],
|
||||
numSections = ribbon.length,
|
||||
numDone = 0;
|
||||
|
||||
for( var b = 0; b < numSections; ++b ) // ribbon section
|
||||
{
|
||||
if( this._drawRibbonSection( ribbon[ b ] ) )
|
||||
{
|
||||
numDone++; // section done
|
||||
}
|
||||
}
|
||||
if( numDone >= numSections ) // ribbon done
|
||||
{
|
||||
this._ribbons[ a ] = null;
|
||||
}
|
||||
}
|
||||
// maintain optional number of ribbons on canvas
|
||||
if( this._ribbons.length < this._options.ribbonCount )
|
||||
{
|
||||
this.addRibbon();
|
||||
}
|
||||
requestAnimationFrame( this._onDraw );
|
||||
},
|
||||
|
||||
// Update container size info
|
||||
_onResize: function( e )
|
||||
{
|
||||
var screen = screenInfo( e );
|
||||
this._width = screen.width;
|
||||
this._height = screen.height;
|
||||
|
||||
if( this._canvas )
|
||||
{
|
||||
this._canvas.width = this._width;
|
||||
this._canvas.height = this._height;
|
||||
|
||||
if( this._context )
|
||||
{
|
||||
this._context.globalAlpha = this._options.colorAlpha;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// Update container size info
|
||||
_onScroll: function( e )
|
||||
{
|
||||
var screen = screenInfo( e );
|
||||
this._scroll = screen.scrolly;
|
||||
},
|
||||
|
||||
};
|
||||
|
||||
// export
|
||||
return Factory;
|
||||
});
|
||||
|
|
@ -37,9 +37,52 @@ var Skin = {
|
|||
$('.fn__progress').attr('value', parseInt($(window).scrollTop())).
|
||||
attr('max', parseInt($('body').outerHeight() -
|
||||
$(window).height()))
|
||||
|
||||
if ($(window).scrollTop() > $(window).height() - 20) {
|
||||
$('.side__menu').addClass('side__menu--edge')
|
||||
$('.side__top').removeClass('side__top--bottom')
|
||||
} else {
|
||||
$('.side__menu').removeClass('side__menu--edge')
|
||||
$('.side__top').addClass('side__top--bottom')
|
||||
}
|
||||
})
|
||||
|
||||
$('.header').circleMagic();
|
||||
$('.header').circleMagic({
|
||||
clearOffset: 0.3,
|
||||
color: 'rgba(255,255,255, .2)',
|
||||
density: 0.2,
|
||||
radius: 15,
|
||||
})
|
||||
|
||||
new Ribbons({
|
||||
colorSaturation: '60%',
|
||||
colorBrightness: '50%',
|
||||
colorAlpha: 0.5,
|
||||
colorCycleSpeed: 5,
|
||||
verticalPosition: 'random',
|
||||
horizontalSpeed: 200,
|
||||
ribbonCount: 3,
|
||||
strokeSize: 0,
|
||||
parallaxAmount: -0.2,
|
||||
animateSections: true,
|
||||
})
|
||||
|
||||
$('.side__menu').click(function () {
|
||||
$('.side__main').addClass('side__main--show').show()
|
||||
})
|
||||
$('.side__bg').click(function () {
|
||||
$('.side__main').removeClass('side__main--show')
|
||||
setTimeout(function () {
|
||||
$('.side__main').hide()
|
||||
}, 1000)
|
||||
})
|
||||
$('.side__top').click(function () {
|
||||
if ($(this).hasClass('side__top--bottom')) {
|
||||
Util.goBottom()
|
||||
} else {
|
||||
Util.goTop()
|
||||
}
|
||||
})
|
||||
},
|
||||
initArticle: function () {
|
||||
page.share()
|
||||
|
|
@ -127,4 +170,7 @@ var Skin = {
|
|||
$(window).scroll()
|
||||
},
|
||||
}
|
||||
Skin.init()
|
||||
|
||||
$(document).ready(function () {
|
||||
Skin.init()
|
||||
})
|
||||
|
|
@ -18,20 +18,83 @@
|
|||
|
||||
-->
|
||||
<#macro header type>
|
||||
<progress class="fn__progress"></progress>
|
||||
<header class="header header--${type}">
|
||||
<canvas id="canvas"></canvas>
|
||||
<div class="wrapper header__title">
|
||||
<h1 class="header__h1 fn__flex-inline">
|
||||
<a href="${servePath}" rel="start" class="header__title">${blogTitle}</a>
|
||||
</h1>
|
||||
<h2 class="header__desc header__desc--title">${blogSubtitle}</h2>
|
||||
<div class="header__desc">
|
||||
${noticeBoard}
|
||||
<progress class="fn__progress"></progress>
|
||||
<header class="header header--${type}">
|
||||
<div class="wrapper header__title">
|
||||
<h1 class="header__h1 fn__flex-inline">
|
||||
<a href="${servePath}" rel="start" class="header__title">${blogTitle}</a>
|
||||
</h1>
|
||||
<h2 class="header__desc header__desc--title">${blogSubtitle}</h2>
|
||||
<div class="header__desc">
|
||||
${noticeBoard}
|
||||
</div>
|
||||
<svg class="header__down" id="headerDown" viewBox="0 0 32 32" width="100%" height="100%">
|
||||
<path d="M15.992 25.304c-0 0-0 0-0.001 0-0.516 0-0.981-0.216-1.31-0.563l-0.001-0.001-14.187-14.996c-0.306-0.323-0.494-0.76-0.494-1.241 0-0.998 0.809-1.807 1.807-1.807 0.517 0 0.983 0.217 1.313 0.565l0.001 0.001 12.875 13.612 12.886-13.612c0.331-0.348 0.797-0.565 1.314-0.565 0.481 0 0.918 0.187 1.242 0.493l-0.001-0.001c0.723 0.687 0.755 1.832 0.072 2.555l-14.201 14.996c-0.33 0.348-0.795 0.564-1.311 0.564-0.001 0-0.003 0-0.004 0h0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<svg class="header__down" id="headerDown" viewBox="0 0 32 32" width="100%" height="100%">
|
||||
<path d="M15.992 25.304c-0 0-0 0-0.001 0-0.516 0-0.981-0.216-1.31-0.563l-0.001-0.001-14.187-14.996c-0.306-0.323-0.494-0.76-0.494-1.241 0-0.998 0.809-1.807 1.807-1.807 0.517 0 0.983 0.217 1.313 0.565l0.001 0.001 12.875 13.612 12.886-13.612c0.331-0.348 0.797-0.565 1.314-0.565 0.481 0 0.918 0.187 1.242 0.493l-0.001-0.001c0.723 0.687 0.755 1.832 0.072 2.555l-14.201 14.996c-0.33 0.348-0.795 0.564-1.311 0.564-0.001 0-0.003 0-0.004 0h0z"></path>
|
||||
</header>
|
||||
<div class="side__menu">
|
||||
<svg viewBox="0 0 32 32" width="100%" height="100%">
|
||||
<path d="M30 18h-28c-1.1 0-2-0.9-2-2s0.9-2 2-2h28c1.1 0 2 0.9 2 2s-0.9 2-2 2zM30 6.25h-28c-1.1 0-2-0.9-2-2s0.9-2 2-2h28c1.1 0 2 0.9 2 2s-0.9 2-2 2zM2 25.75h28c1.1 0 2 0.9 2 2s-0.9 2-2 2h-28c-1.1 0-2-0.9-2-2s0.9-2 2-2z"></path>
|
||||
</svg>
|
||||
<span>
|
||||
menu
|
||||
</span>
|
||||
</div>
|
||||
<div class="side__main">
|
||||
<div class="side__bg"></div>
|
||||
<div class="side__panel">
|
||||
<img src="${faviconURL}">
|
||||
<a href="${servePath}/tags.html" rel="section">
|
||||
${allTagsLabel}
|
||||
</a>
|
||||
•
|
||||
<a href="${servePath}/archives.html">
|
||||
${archiveLabel}
|
||||
</a>
|
||||
•
|
||||
<a rel="archive" href="${servePath}/links.html">
|
||||
${linkLabel}
|
||||
</a>
|
||||
<nav class="wrapper header__nav fn__clear">
|
||||
<a href="${servePath}" rel="start">
|
||||
<#if type == 'article'>
|
||||
${blogTitle}
|
||||
<#else>
|
||||
${indexLabel}
|
||||
</#if>
|
||||
</a>
|
||||
|
||||
<#list pageNavigations as page>
|
||||
<a class="fn__flex-inline" href="${page.pagePermalink}" target="${page.pageOpenTarget}" rel="section">
|
||||
<#if page.pageIcon != ''><img src="${page.pageIcon}"></#if> ${page.pageTitle}
|
||||
</a>
|
||||
</#list>
|
||||
|
||||
<a href="${servePath}/search">
|
||||
${searchLabel}
|
||||
</a>
|
||||
|
||||
<div class="fn__right">
|
||||
|
||||
<a rel="alternate" href="${servePath}/rss.xml">
|
||||
RSS
|
||||
</a>
|
||||
|
||||
<#if isLoggedIn>
|
||||
<a href="${servePath}/admin-index.do#main">
|
||||
${adminLabel}
|
||||
</a>
|
||||
<a href="${logoutURL}">
|
||||
${logoutLabel}
|
||||
</a>
|
||||
<#else>
|
||||
<a rel="alternate" href="${servePath}/start">
|
||||
${startToUseLabel}
|
||||
</a>
|
||||
</#if>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</#macro>
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
<#--
|
||||
|
||||
Solo - A small and beautiful blogging system written in Java.
|
||||
Copyright (c) 2010-present, b3log.org
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
-->
|
||||
<img src="${faviconURL}">
|
||||
<nav class="wrapper header__nav fn__clear">
|
||||
<a href="${servePath}" rel="start">
|
||||
<#if type == 'article'>
|
||||
${blogTitle}
|
||||
<#else>
|
||||
${indexLabel}
|
||||
</#if>
|
||||
</a>
|
||||
|
||||
<#list pageNavigations as page>
|
||||
<a class="fn__flex-inline" href="${page.pagePermalink}" target="${page.pageOpenTarget}" rel="section">
|
||||
<#if page.pageIcon != ''><img src="${page.pageIcon}"></#if> ${page.pageTitle}
|
||||
</a>
|
||||
</#list>
|
||||
|
||||
<a href="${servePath}/search">
|
||||
${searchLabel}
|
||||
</a>
|
||||
|
||||
<div class="fn__right">
|
||||
<#include "../../common-template/macro-user_site.ftl">
|
||||
<@userSite dir=""></@userSite>
|
||||
<a rel="alternate" href="${servePath}/rss.xml">
|
||||
RSS
|
||||
</a>
|
||||
|
||||
<#if isLoggedIn>
|
||||
<a href="${servePath}/admin-index.do#main">
|
||||
${adminLabel}
|
||||
</a>
|
||||
<a href="${logoutURL}">
|
||||
${logoutLabel}
|
||||
</a>
|
||||
<#else>
|
||||
<a rel="alternate" href="${servePath}/start">
|
||||
${startToUseLabel}
|
||||
</a>
|
||||
</#if>
|
||||
</div>
|
||||
</nav>
|
||||
Loading…
Reference in New Issue