JavaScript实现在HTML中的粒子文字特效 |
您所在的位置：网站首页 › 粒子特效原理研究内容 › JavaScript实现在HTML中的粒子文字特效 |
JavaScript实现在HTML中的粒子文字特效
|
这是一个蛮实用的小功能，用于在HTML中显示出粒子文字特效，具体什么效果嘛，话不多说，看图： JS代码如下： /** * 粒子文字特效 * 范例： * 文字 * * 默认页面居中显示 * @author Rob Sivan * @date 2022/9/20 */ const COLOR = "#39BC54"; // 设定粒子特效颜色 let MESSAGE = document.getElementById("ChangeText").textContent; // 根据标签的ID获取待处理的文字内容 let FONT_SIZE = (window.innerWidth * 0.08); // 字体大小 let AMOUNT = 6000; // 设定粒子数量 let SIZE = 2; // 粒子大小 let INITIAL_DISPLACEMENT = 500; // 最初位移量 const INITIAL_VELOCITY = 7.5; // 最初速度 const VELOCITY_RETENTION = 0.95; // 速度保持 let SETTLE_SPEED = 1; // 稳定速度 const FLEE_SPEED = 2; // 逃逸速度 const FLEE_DISTANCE = 50; // 逃逸距离 let FLEE = true; // 逃逸模式 let SCATTER_VELOCITY = 3; // 散射速度 const SCATTER = true; // 散射模式 // 若处于移动设备展示 if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { // Mobile MESSAGE = document.getElementById("ChangeText").textContent; // 通过标签ID获取文本内容 FONT_SIZE = 50; // 字体大小减小 AMOUNT = 300; // 粒子数量减少 SIZE = 2; INITIAL_DISPLACEMENT = 100; // 最初位移量减少 SETTLE_SPEED = 1; // 最初速度减少 FLEE = false; // 关闭逃逸模式 SCATTER_VELOCITY = 2; // 散射速度 } const canvas = document.getElementById("ChangeText"); const ctx = canvas.getContext("2d"); // 创建画布 let POINTS = []; const MOUSE = { x: 0, y: 0 }; function Point(x, y, r, g, b, a) { const angle = Math.random() * 6.28; this.x = canvas.width / 2 - x + (Math.random() - 0.5) * INITIAL_DISPLACEMENT; this.y = canvas.height / 2 - y + (Math.random() - 0.5) * INITIAL_DISPLACEMENT; this.velx = INITIAL_VELOCITY * Math.cos(angle); this.vely = INITIAL_VELOCITY * Math.sin(angle); this.target_x = canvas.width / 2 - x; this.target_y = canvas.height / 2 - y; this.r = r; this.g = g; this.b = b; this.a = a; this.getX = function () { return this.x; } this.getY = function () { return this.y; } this.fleeFrom = function () { this.velx -= ((MOUSE.x - this.x) * FLEE_SPEED / 10); this.vely -= ((MOUSE.y - this.y) * FLEE_SPEED / 10); } this.settleTo = function () { this.velx += ((this.target_x - this.x) * SETTLE_SPEED / 100); this.vely += ((this.target_y - this.y) * SETTLE_SPEED / 100); this.velx -= this.velx * (1 - VELOCITY_RETENTION); this.vely -= this.vely * (1 - VELOCITY_RETENTION); } this.scatter = function () { const unit = this.unitVecToMouse(); const vel = SCATTER_VELOCITY * 10 * (0.5 + Math.random() / 2); this.velx = -unit.x * vel; this.vely = -unit.y * vel; } this.move = function () { if (this.distanceToMouse() this.settleTo(); } if (this.x + this.velx = canvas.width) { this.velx *= -1; } if (this.y + this.vely = canvas.height) { this.vely *= -1; } this.x += this.velx; this.y += this.vely; } this.distanceToMouse = function () { return this.distanceTo(MOUSE.x, MOUSE.y); } this.distanceTo = function (x, y) { return Math.sqrt((x - this.x) * (x - this.x) + (y - this.y) * (y - this.y)); } this.unitVecToMouse = function () { return this.unitVecTo(MOUSE.x, MOUSE.y); } this.unitVecTo = function (x, y) { const dx = x - this.x; const dy = y - this.y; return { x: dx / Math.sqrt(dx * dx + dy * dy), y: dy / Math.sqrt(dx * dx + dy * dy) }; } } window.addEventListener("resize", function () { resizeCanvas() adjustText() }); if (FLEE) { window.addEventListener("mousemove", function (event) { MOUSE.x = event.clientX; MOUSE.y = event.clientY; }); } if (SCATTER) { window.addEventListener("click", function (event) { MOUSE.x = event.clientX; MOUSE.y = event.clientY; for (let i = 0; i canvas.width = window.innerWidth; canvas.height = window.innerHeight; } function adjustText() { ctx.fillStyle = COLOR; ctx.textBaseline = "middle"; ctx.textAlign = "center"; ctx.font = FONT_SIZE + "px Arial"; ctx.fillText(MESSAGE, canvas.width / 2, canvas.height / 2); const textWidth = ctx.measureText(MESSAGE).width; if (textWidth === 0) { return; } const minX = canvas.width / 2 - textWidth / 2; const minY = canvas.height / 2 - FONT_SIZE / 2; const data = ctx.getImageData(minX, minY, textWidth, FONT_SIZE).data; let isBlank = true; for (let i = 0; i isBlank = false; break; } } if (!isBlank) { let count = 0; let curr = 0; let num = 0; let x = 0; let y = 0; const w = Math.floor(textWidth); POINTS = []; while (count num = Math.floor(Math.random() * data.length); curr = data[num]; } num = Math.floor(num / 4); x = w / 2 - num % w; y = FONT_SIZE / 2 - Math.floor(num / w); POINTS.push(new Point(x, y, data[num * 4], data[num * 4 + 1], data[num * 4 + 2], data[num * 4 + 3])); curr = 0; count++; } } } function init() { resizeCanvas() adjustText() window.requestAnimationFrame(animate); } function animate() { update(); draw(); } function update() { let point; for (let i = 0; i ctx.clearRect(0, 0, canvas.width, canvas.height); let point; for (let i = 0; i // Mobile MESSAGE = document.getElementById("ChangeText").textContent; // 通过标签ID获取文本内容 FONT_SIZE = 50; // 字体大小减小 AMOUNT = 300; // 粒子数量减少 SIZE = 2; INITIAL_DISPLACEMENT = 100; // 最初位移量减少 SETTLE_SPEED = 1; // 最初速度减少 FLEE = false; // 关闭逃逸模式 SCATTER_VELOCITY = 2; // 散射速度 } const canvas = document.getElementById("ChangeText"); const ctx = canvas.getContext("2d"); // 创建画布 let POINTS = []; const MOUSE = { x: 0, y: 0 }; function Point(x, y, r, g, b, a) { const angle = Math.random() * 6.28; this.x = canvas.width / 2 - x + (Math.random() - 0.5) * INITIAL_DISPLACEMENT; this.y = canvas.height / 2 - y + (Math.random() - 0.5) * INITIAL_DISPLACEMENT; this.velx = INITIAL_VELOCITY * Math.cos(angle); this.vely = INITIAL_VELOCITY * Math.sin(angle); this.target_x = canvas.width / 2 - x; this.target_y = canvas.height / 2 - y; this.r = r; this.g = g; this.b = b; this.a = a; this.getX = function () { return this.x; } this.getY = function () { return this.y; } this.fleeFrom = function () { this.velx -= ((MOUSE.x - this.x) * FLEE_SPEED / 10); this.vely -= ((MOUSE.y - this.y) * FLEE_SPEED / 10); } this.settleTo = function () { this.velx += ((this.target_x - this.x) * SETTLE_SPEED / 100); this.vely += ((this.target_y - this.y) * SETTLE_SPEED / 100); this.velx -= this.velx * (1 - VELOCITY_RETENTION); this.vely -= this.vely * (1 - VELOCITY_RETENTION); } this.scatter = function () { const unit = this.unitVecToMouse(); const vel = SCATTER_VELOCITY * 10 * (0.5 + Math.random() / 2); this.velx = -unit.x * vel; this.vely = -unit.y * vel; } this.move = function () { if (this.distanceToMouse() this.settleTo(); } if (this.x + this.velx = canvas.width) { this.velx *= -1; } if (this.y + this.vely = canvas.height) { this.vely *= -1; } this.x += this.velx; this.y += this.vely; } this.distanceToMouse = function () { return this.distanceTo(MOUSE.x, MOUSE.y); } this.distanceTo = function (x, y) { return Math.sqrt((x - this.x) * (x - this.x) + (y - this.y) * (y - this.y)); } this.unitVecToMouse = function () { return this.unitVecTo(MOUSE.x, MOUSE.y); } this.unitVecTo = function (x, y) { const dx = x - this.x; const dy = y - this.y; return { x: dx / Math.sqrt(dx * dx + dy * dy), y: dy / Math.sqrt(dx * dx + dy * dy) }; } } window.addEventListener("resize", function () { resizeCanvas() adjustText() }); if (FLEE) { window.addEventListener("mousemove", function (event) { MOUSE.x = event.clientX; MOUSE.y = event.clientY; }); } if (SCATTER) { window.addEventListener("click", function (event) { MOUSE.x = event.clientX; MOUSE.y = event.clientY; for (let i = 0; i canvas.width = window.innerWidth; canvas.height = window.innerHeight; } function adjustText() { ctx.fillStyle = COLOR; ctx.textBaseline = "middle"; ctx.textAlign = "center"; ctx.font = FONT_SIZE + "px Arial"; ctx.fillText(MESSAGE, canvas.width / 2, canvas.height / 2); const textWidth = ctx.measureText(MESSAGE).width; if (textWidth === 0) { return; } const minX = canvas.width / 2 - textWidth / 2; const minY = canvas.height / 2 - FONT_SIZE / 2; const data = ctx.getImageData(minX, minY, textWidth, FONT_SIZE).data; let isBlank = true; for (let i = 0; i isBlank = false; break; } } if (!isBlank) { let count = 0; let curr = 0; let num = 0; let x = 0; let y = 0; const w = Math.floor(textWidth); POINTS = []; while (count num = Math.floor(Math.random() * data.length); curr = data[num]; } num = Math.floor(num / 4); x = w / 2 - num % w; y = FONT_SIZE / 2 - Math.floor(num / w); POINTS.push(new Point(x, y, data[num * 4], data[num * 4 + 1], data[num * 4 + 2], data[num * 4 + 3])); curr = 0; count++; } } } function init() { resizeCanvas() adjustText() window.requestAnimationFrame(animate); } function animate() { update(); draw(); } function update() { let point; for (let i = 0; i ctx.clearRect(0, 0, canvas.width, canvas.height); let point; for (let i = 0; i |
初始时会全屏扩散，然后聚集成预设定的文本，之后的鼠标移动与点击文字都会产生对应的扩散了特效，并自动恢复文本显示，粒子的大小、数量、移动速度，文本的大小、颜色，等都是可以自定义的。【本文地址】
今日新闻 |
推荐新闻 |