前言
这个特效其实网上早就有了,只是最近在逛别人的博客(初's Blog)时候才看到,鼠标移动时会有炫彩的小星星跟随显示,也是一种蛮特别的,增加博客趣味性的效果。可以看到并没有用在博客上,因为移动端出现冲突,搭配起来也不合适。但是每个人博客是不一样的,或许正合适你。
效果预览
演示站:JS鼠标跟随特效
创建JS文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 | /** Template Name: 滑动小星星 Blog:https://mlldxe.cn/ author: _犬's url: https://mlldxe.cn/archives/526 */ (function fairyDustCursor() { var possibleColors = ["#D61C59", "#E7D84B", "#1B8798"] var width = window.innerWidth; var height = window.innerHeight; var cursor = { x: width / 2, y: width / 2 }; var particles = []; function init() { bindEvents(); loop() } function bindEvents() { document.addEventListener('mousemove', onMouseMove); document.addEventListener('touchmove', onTouchMove); document.addEventListener('touchstart', onTouchMove); window.addEventListener('resize', onWindowResize) } function onWindowResize(e) { width = window.innerWidth; height = window.innerHeight } function onTouchMove(e) { if (e.touches.length > 0) { for (var i = 0; i < e.touches.length; i++) { addParticle(e.touches[i].clientX, e.touches[i].clientY, possibleColors[Math.floor(Math.random() * possibleColors.length)]) } } } function onMouseMove(e) { cursor.x = e.clientX; cursor.y = e.clientY; addParticle(cursor.x, cursor.y, possibleColors[Math.floor(Math.random() * possibleColors.length)]) } function addParticle(x, y, color) { var particle = new Particle(); particle.init(x, y, color); particles.push(particle) } function updateParticles() { for (var i = 0; i < particles.length; i++) { particles[i].update() } for (var i = particles.length - 1; i >= 0; i--) { if (particles[i].lifeSpan < 0) { particles[i].die(); particles.splice(i, 1) } } } function loop() { requestAnimationFrame(loop); updateParticles() } function Particle() { this.character = "*"; this.lifeSpan = 200; this.initialStyles = { "position": "fixed", "top": "0", "display": "block", "pointerEvents": "none", "z-index": "99999999", "fontSize": "16px", "will-change": "transform" }; this.init = function (x, y, color) { this.velocity = { x: (Math.random() < 0.5 ? -1 : 1) * (Math.random() / 2), y: 1 }; this.position = { x: x - 10, y: y - 20 }; this.initialStyles.color = color; this.element = document.createElement('span'); this.element.innerHTML = this.character; applyProperties(this.element, this.initialStyles); this.update(); document.body.appendChild(this.element) }; this.update = function () { this.position.x += this.velocity.x; this.position.y += this.velocity.y; this.lifeSpan--; this.element.style.transform = "translate3d(" + this.position.x + "px," + this.position.y + "px,0) scale(" + (this.lifeSpan / 120) + ")" } this.die = function () { this.element.parentNode.removeChild(this.element) } } function applyProperties(target, properties) { for (var key in properties) { target.style[key] = properties[key] } } init() })(); |
使用方法
添加这段代码(可压缩一下)
1 | <script src="https://blog.mlldxe.cn/cursor-effects.js"></script> |