Canvas

Canvas的粒子组成文字动画特效

阿里云


这是一款基于 canvas 的粒子组成文字动画特效。该特效在初始化时,动态生成粒子,并以动画的方式组成指定的文字。在生成文字之后,还可以用鼠标和文字进行交互。

HTML 结构

该特效的基本 HTML 结构如下。

也想出现在这里?联系我们
创客主机
  1. <section id="ci-particles">
  2.   <canvas id="canvas"></canvas>
  3.   <h1 id="headline">jQuery之家</h1>
  4. </section>

CSS 样式

为页面添加基本样式。

  1. body {
  2.   background-color: #000000;
  3.   margin: 0;
  4.   overflow: hidden;
  5.   font-size: 0;
  6. }
  7. body section {
  8.   background: url(path/to/background.jpg) no-repeat center center fixed;
  9.   -webkit-background-size: cover;
  10.   -moz-background-size: cover;
  11.   -o-background-size: cover;
  12.   background-size: cover;
  13.   width: 100vw;
  14.   height: 100vh;
  15.   font-weight: 700;
  16. }
  17. body section canvas {
  18.   width: 100vw;
  19.   height: 100vh;
  20. }

Javascript

然后通过下面的 js 代码来生成 canvas 粒子文字和交互动画。

  1. var canvas = document.querySelector("#canvas"),
  2.     ctx = canvas.getContext("2d"),
  3.     link = document.createElement('link');
  4.     particles = [],
  5.     amount = 0,
  6.     mouse = { x: -9999, y: -9999 },
  7.     radius = 1,
  8.     colors = [
  9.       "rgba(252,248,254,0.85)", 
  10.       "rgba(220,203,255,0.75)", 
  11.       "rgba(154,112,124,0.85)", 
  12.       "rgba(192,213,255,0.85)", 
  13.       "rgba(244,223,254,0.75)"
  14.     ],
  15.     headline = document.querySelector("#headline"),
  16.     ww = window.innerWidth,
  17.     wh = window.innerHeight;
  18.  
  19. function Particle(x, y) {
  20.  
  21.   this.x = Math.random() * ww;
  22.   this.y = Math.random() * wh;
  23.   this.dest = { x: x, y: y };
  24.   this.r = Math.random() * 2 * Math.PI;
  25.   this.vx = (Math.random() - 0.5) * 25;
  26.   this.vy = (Math.random() - 0.5) * 25;
  27.   this.accX = 0;
  28.   this.accY = 0;
  29.   this.friction = Math.random() * 0.025 + 0.94;
  30.   this.color = colors[Math.floor(Math.random() * 2.75)];
  31. }
  32.  
  33. Particle.prototype.render = function() {
  34.  
  35.   this.accX = (this.dest.x - this.x) / 1000;
  36.   this.accY = (this.dest.y - this.y) / 1000;
  37.   this.vx += this.accX;
  38.   this.vy += this.accY;
  39.   this.vx *= this.friction;
  40.   this.vy *= this.friction;
  41.   this.x += this.vx;
  42.   this.y += this.vy;
  43.  
  44.   ctx.fillStyle = this.color;
  45.   ctx.beginPath();
  46.   ctx.arc(this.x, this.y, this.r, Math.PI * 2, false);
  47.   ctx.fill();
  48.  
  49.   var a = this.x - mouse.x;
  50.   var b = this.y - mouse.y;
  51.  
  52.   var distance = Math.sqrt(a * a + b * b);
  53.   if (distance < (radius * 75)) {
  54.  
  55.     this.accX = (this.x - mouse.x) / 100;
  56.     this.accY = (this.y - mouse.y) / 100;
  57.     this.vx += this.accX;
  58.     this.vy += this.accY;
  59.   }
  60. }
  61.  
  62. function onMouseMove(e) {
  63.  
  64.   mouse.x = e.clientX;
  65.   mouse.y = e.clientY;
  66.   }
  67.  
  68.   function onTouchMove(e) {
  69.  
  70.   if (e.touches.length > 0) {
  71.  
  72.     mouse.x = e.touches[0].clientX;
  73.     mouse.y = e.touches[0].clientY;
  74.   }
  75. }
  76.  
  77. function onTouchEnd(e) {
  78.  
  79.   mouse.x = -9999;
  80.   mouse.y = -9999;
  81. }
  82.  
  83. function initScene() {
  84.  
  85.   ww = canvas.width = window.innerWidth;
  86.   wh = canvas.height = window.innerHeight;
  87.  
  88.   ctx.clearRect(0, 0, canvas.width, canvas.height);
  89.  
  90.   link.rel = 'stylesheet';
  91.   link.type = 'text/css';
  92.   link.href = 'https://fonts.googleapis.com/css?family=Abril+Fatface';
  93.   document.getElementsByTagName('head')[0].appendChild(link);
  94.  
  95.   ctx.font = 'bold 26vw "Abril Fatface"';
  96.   ctx.textAlign = "center";
  97.   ctx.fillText(headline.innerHTML, ww / 2, wh / 1.6);
  98.  
  99.   var data = ctx.getImageData(0, 0, ww, wh).data;
  100.  
  101.   ctx.clearRect(0, 0, canvas.width, canvas.height);
  102.   ctx.globalCompositeOperation = "screen";
  103.  
  104.   particles = [];
  105.   for (var i = 0; i < ww; i += Math.round(ww / 200)) {
  106.     for (var j = 0; j < wh; j += Math.round(ww / 200)) {
  107.       if (data[((i + j * ww) * 4) + 3] > 200) {
  108.  
  109.         particles.push(new Particle(i, j));
  110.       }
  111.     }
  112.   }
  113.   amount = particles.length;
  114. }
  115.  
  116. function render(a) {
  117.  
  118.   requestAnimationFrame(render);
  119.   ctx.clearRect(0, 0, canvas.width, canvas.height);
  120.   for (var i = 0; i < amount; i++) {
  121.  
  122.     particles[i].render();
  123.   }
  124. }
  125.  
  126. headline.addEventListener("keyup", initScene);
  127. window.addEventListener("resize", initScene);
  128. window.addEventListener("mousemove", onMouseMove);
  129. window.addEventListener("touchmove", onTouchMove);
  130. window.addEventListener("touchend", onTouchEnd);
  131. initScene();
  132. requestAnimationFrame(render);

官方网址:https://coidea.website/categories/challenges/animated-text-with-particles/

Canvas 的粒子组成文字动画特效

已有 613 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(1)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!