看着别人的Next 主题炫酷的很，自己的很low，怎么办。不慌盘它
版本
- Hexo 版本：
5.0.x - Next 版本：
7.8.0
如果和以上版本不同，请参考具体版本配置
鼠标点击特效
有以下三种特效爱心特效 礼花特效 爆炸特性
在themes/next/source/js/文件夹下新建cursor文件夹
爱心特效
新建文件love.min.js，将以下代码复制到文件，将js文件复制到themes/next/source/js/cursor/文件夹
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);
礼花特效
新建文件fireworks.js，将以下代码复制到文件，将js文件复制到themes/next/source/js/cursor/文件夹
class Circle {
constructor({ origin, speed, color, angle, context }) {
this.origin = origin
this.position = { ...this.origin }
this.color = color
this.speed = speed
this.angle = angle
this.context = context
this.renderCount = 0
}
draw() {
this.context.fillStyle = this.color
this.context.beginPath()
this.context.arc(this.position.x, this.position.y, 2, 0, Math.PI * 2)
this.context.fill()
}
move() {
this.position.x = (Math.sin(this.angle) * this.speed) + this.position.x
this.position.y = (Math.cos(this.angle) * this.speed) + this.position.y + (this.renderCount * 0.3)
this.renderCount++
}
}
class Boom {
constructor ({ origin, context, circleCount = 16, area }) {
this.origin = origin
this.context = context
this.circleCount = circleCount
this.area = area
this.stop = false
this.circles = []
}
randomArray(range) {
const length = range.length
const randomIndex = Math.floor(length * Math.random())
return range[randomIndex]
}
randomColor() {
const range = ['8', '9', 'A', 'B', 'C', 'D', 'E', 'F']
return '#' + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range)
}
randomRange(start, end) {
return (end - start) * Math.random() + start
}
init() {
for(let i = 0; i < this.circleCount; i++) {
const circle = new Circle({
context: this.context,
origin: this.origin,
color: this.randomColor(),
angle: this.randomRange(Math.PI - 1, Math.PI + 1),
speed: this.randomRange(1, 6)
})
this.circles.push(circle)
}
}
move() {
this.circles.forEach((circle, index) => {
if (circle.position.x > this.area.width || circle.position.y > this.area.height) {
return this.circles.splice(index, 1)
}
circle.move()
})
if (this.circles.length == 0) {
this.stop = true
}
}
draw() {
this.circles.forEach(circle => circle.draw())
}
}
class CursorSpecialEffects {
constructor() {
this.computerCanvas = document.createElement('canvas')
this.renderCanvas = document.createElement('canvas')
this.computerContext = this.computerCanvas.getContext('2d')
this.renderContext = this.renderCanvas.getContext('2d')
this.globalWidth = window.innerWidth
this.globalHeight = window.innerHeight
this.booms = []
this.running = false
}
handleMouseDown(e) {
const boom = new Boom({
origin: { x: e.clientX, y: e.clientY },
context: this.computerContext,
area: {
width: this.globalWidth,
height: this.globalHeight
}
})
boom.init()
this.booms.push(boom)
this.running || this.run()
}
handlePageHide() {
this.booms = []
this.running = false
}
init() {
const style = this.renderCanvas.style
style.position = 'fixed'
style.top = style.left = 0
style.zIndex = '999999999999999999999999999999999999999999'
style.pointerEvents = 'none'
style.width = this.renderCanvas.width = this.computerCanvas.width = this.globalWidth
style.height = this.renderCanvas.height = this.computerCanvas.height = this.globalHeight
document.body.append(this.renderCanvas)
window.addEventListener('mousedown', this.handleMouseDown.bind(this))
window.addEventListener('pagehide', this.handlePageHide.bind(this))
}
run() {
this.running = true
if (this.booms.length == 0) {
return this.running = false
}
requestAnimationFrame(this.run.bind(this))
this.computerContext.clearRect(0, 0, this.globalWidth, this.globalHeight)
this.renderContext.clearRect(0, 0, this.globalWidth, this.globalHeight)
this.booms.forEach((boom, index) => {
if (boom.stop) {
return this.booms.splice(index, 1)
}
boom.move()
boom.draw()
})
this.renderContext.drawImage(this.computerCanvas, 0, 0, this.globalWidth, this.globalHeight)
}
}
const cursorSpecialEffects = new CursorSpecialEffects()
cursorSpecialEffects.init()
爆炸特效
新建文件explosion.min.js，将以下代码复制到文件，将js文件复制到themes/next/source/js/cursor/文件夹
"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)}"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)};
配置
在themes/next/layout/文件夹下新建_custom文件夹
在themes/next/layout/_custom/文件夹下新建custom.swig文件，将以下代码复制到文件
{% if theme.cursor_effect %}
{% if theme.cursor_effect.type == "fireworks" %}
<script src="/js/cursor/fireworks.js"></script>
{% elseif theme.cursor_effect.type == "explosion" %}
<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas>
<script src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
<script src="/js/cursor/explosion.min.js"></script>
{% elseif theme.cursor_effect.type == "love" %}
<script src="/js/cursor/love.min.js"></script>
{% endif %}
{% endif %}
启用
添加以下配置到Next _config.yml 配置文件
# 点击特效
cursor_effect:
enabled: true
type: love # fireworks：礼花 | explosion：爆炸 | love：浮出爱心
设置背景动画
next 有自带的背景动画，在以下配置中开启开关。在three_waves canvas_lines canvas_sphere三个配置中开启其中一种背景
# 设置「背景动画」
three:
enable: true #开关
three_waves: false
canvas_lines: false
canvas_sphere: true
找到以下配置，打开注释即可使用
vendors:
# Internal version: 1.0.0
three: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/three.min.js
three_waves: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/three-waves.min.js
canvas_lines: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/canvas_lines.min.js
canvas_sphere: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/canvas_sphere.min.js
设置背景彩带
找到以下配置，开启配置开关。
#设置canvas背景彩带
canvas_ribbon:
enable: true
size: 90 # The width of the ribbon
alpha: 0.6 # The transparency of the ribbon
zIndex: -1 # The display level of the ribbon
找到以下配置，这是next 自带的点击生成彩带js，可以打开注释，自己先试一下效果。
但是我们需要设置 随机生成的动画彩带效果
vendors:
# Internal version: 1.0.0
# canvas_ribbon: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-ribbon@1/canvas-ribbon.js
在themes/next/source/js/文件夹下新建ribbon文件夹
新建文件ribbon.js，将以下代码复制到文件。将js文件复制到themes/next/source/js/ribbon/文件夹
/**
* 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,//返回html dom中的body节点 即<body>
_d = document.documentElement;//返回html dom中的root 节点 即<html>
// 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: 200,
// 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._canvas.style["background-color"]="#1f1f1f";
this._canvas.id = "bgCanvas";
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);
window.addEventListener("scroll", this._onScroll);
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;
});
new Ribbons();
找到canvas_ribbon配置，设置成刚才新加的js文件路径。我这里就是/js/ribbon/ribbon.js
vendors:
# Internal version: 1.0.0
canvas_ribbon: /js/ribbon/ribbon.js
背景彩带自定义颜色
在ribbon.js文件找到以下配置段，可以修改colorSaturation colorBrightness 调整彩带颜色
还有其他配置，大家可以看一下注释的意思
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: 200,
// 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
};
完
欢迎逛一下楼主博客：liuqi-java.github.io
5777
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
