网站markdown排版、鼠标特效
一、前因
接着来。
二、适合阅读的排版
地址: https://github.com/sofish/typo.css/
在head中引用
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/typo.css@2.1.2/typo.min.css">
在需要排版的节点中加入class=“typo"
三、跨平台的字体
地址：https://github.com/zenozeng/fonts.css
jsdelivr中的链接没有用，只能下载后将fonts.css放入自己站点引用。记得改成自己的路径
<link rel="stylesheet" href="/css/icomoon.css" />
需要的字体中加入class=“font-kai”，可选值为：font-hei 、font-kai、font-song、font-fang-song。方法同上一条。
四、鼠标特效
特效这玩意可太多了，找了半天，要么收费，要么侵入太强，要么用的canvas，而我不太会，费了番功夫，没整好，选择换掉。
没成功的地址：http://www.dmaku.com/jquery/1178.html，效果五我可太喜了。
最后找到这个简单粗暴、无感、开源的。好用记得给作者点亮星。
地址：https://github.com/tholman/cursor-effects
我用的是气泡效果，其他效果对应导入js即可。
js中加入下列代码就可以了
// start bubbleCUrsor
function bubbleCursor(options) {
let hasWrapperEl = options && options.element
let element = hasWrapperEl || document.body
let width = window.innerWidth
let height = window.innerHeight
let cursor = { x: width / 2, y: width / 2 }
let particles = []
let canvas, context
let canvImages = []
function init(wrapperEl) {
canvas = document.createElement("canvas")
context = canvas.getContext("2d")
canvas.style.top = "0px"
canvas.style.left = "0px"
canvas.style.pointerEvents = "none"
if (hasWrapperEl) {
canvas.style.position = "absolute"
element.appendChild(canvas)
canvas.width = element.clientWidth
canvas.height = element.clientHeight
} else {
canvas.style.position = "fixed"
document.body.appendChild(canvas)
canvas.width = width
canvas.height = height
}
bindEvents()
loop()
}
// Bind events that are needed
function bindEvents() {
element.addEventListener("mousemove", onMouseMove)
element.addEventListener("touchmove", onTouchMove)
element.addEventListener("touchstart", onTouchMove)
window.addEventListener("resize", onWindowResize)
}
function onWindowResize(e) {
width = window.innerWidth
height = window.innerHeight
if (hasWrapperEl) {
canvas.width = element.clientWidth
canvas.height = element.clientHeight
} else {
canvas.width = width
canvas.height = height
}
}
function onTouchMove(e) {
if (e.touches.length > 0) {
for (let i = 0; i < e.touches.length; i++) {
addParticle(
e.touches[i].clientX,
e.touches[i].clientY,
canvImages[Math.floor(Math.random() * canvImages.length)]
)
}
}
}
function onMouseMove(e) {
if (hasWrapperEl) {
const boundingRect = element.getBoundingClientRect()
cursor.x = e.clientX - boundingRect.left
cursor.y = e.clientY - boundingRect.top
} else {
cursor.x = e.clientX
cursor.y = e.clientY
}
addParticle(cursor.x, cursor.y)
}
function addParticle(x, y, img) {
particles.push(new Particle(x, y, img))
}
function updateParticles() {
context.clearRect(0, 0, width, height)
// Update
for (let i = 0; i < particles.length; i++) {
particles[i].update(context)
}
// Remove dead particles
for (let i = particles.length - 1; i >= 0; i--) {
if (particles[i].lifeSpan < 0) {
particles.splice(i, 1)
}
}
}
function loop() {
updateParticles()
requestAnimationFrame(loop)
}
function Particle(x, y, canvasItem) {
const lifeSpan = Math.floor(Math.random() * 60 + 60)
this.initialLifeSpan = lifeSpan //
this.lifeSpan = lifeSpan //ms
this.velocity = {
x: (Math.random() < 0.5 ? -1 : 1) * (Math.random() / 10),
y: -0.4 + Math.random() * -1,
}
this.position = { x: x, y: y }
this.canv = canvasItem
this.baseDimension = 4
this.update = function(context) {
this.position.x += this.velocity.x
this.position.y += this.velocity.y
this.velocity.x += ((Math.random() < 0.5 ? -1 : 1) * 2) / 75
this.velocity.y -= Math.random() / 600
this.lifeSpan--
const scale =
0.2 + (this.initialLifeSpan - this.lifeSpan) / this.initialLifeSpan
context.fillStyle = "#e6f1f7"
context.strokeStyle = "#3a92c5"
context.beginPath()
context.arc(
this.position.x - (this.baseDimension / 2) * scale,
this.position.y - this.baseDimension / 2,
this.baseDimension * scale,
0,
2 * Math.PI
)
context.stroke()
context.fill()
context.closePath()
}
}
init()
}
new bubbleCursor()
// end bubbleCUrsor
效果：
五、总结
够了够了，今天先美到这。
