基于canvas的粒子组成文字动画互动特效

所属分类:其他-动画效果

 39838  477  查看评论 (18)
分享到微信朋友圈
X
基于canvas的粒子组成文字动画互动特效 ie兼容12

使用方法:

Html 

<section id="ci-particles">
    <canvas id="canvas"></canvas>
    <h1 id="headline">jQuery</h1>
</section>

CSS样式

为页面添加基本样式。

body {
	background-color:#000000;
	margin:0;
	overflow:hidden;
	font-size:0;
}

Javascript

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

var canvas = document.querySelector("#canvas"),
   ctx = canvas.getContext("2d"),
   link = document.createElement('link');
   particles = [],
   amount = 0,
   mouse = { x: -9999, y: -9999 },
   radius = 1,
   colors = [
     "rgba(252,248,254,0.85)", //粒子颜色在这里修改rgb格式
     "rgba(220,203,255,0.75)", 
     "rgba(154,112,124,0.85)", 
     "rgba(192,213,255,0.85)", 
     "rgba(244,223,254,0.75)"
   ],
   headline = document.querySelector("#headline"),
   ww = window.innerWidth,
   wh = window.innerHeight;
function Particle(x, y) {
 this.x = Math.random() * ww;
 this.y = Math.random() * wh;
 this.dest = { x: x, y: y };
 this.r = Math.random() * 2 * Math.PI;
 this.vx = (Math.random() - 0.5) * 25;
 this.vy = (Math.random() - 0.5) * 25;
 this.accX = 0;
 this.accY = 0;
 this.friction = Math.random() * 0.025 + 0.94;
 this.color = colors[Math.floor(Math.random() * 2.75)];
}
Particle.prototype.render = function() {
 this.accX = (this.dest.x - this.x) / 1000;
 this.accY = (this.dest.y - this.y) / 1000;
 this.vx += this.accX;
 this.vy += this.accY;
 this.vx *= this.friction;
 this.vy *= this.friction;
 this.x += this.vx;
 this.y += this.vy;
 ctx.fillStyle = this.color;
 ctx.beginPath();
 ctx.arc(this.x, this.y, this.r, Math.PI * 2, false);
 ctx.fill();
 var a = this.x - mouse.x;
 var b = this.y - mouse.y;
 var distance = Math.sqrt(a * a + b * b);
 if (distance < (radius * 75)) {
   this.accX = (this.x - mouse.x) / 100;
   this.accY = (this.y - mouse.y) / 100;
   this.vx += this.accX;
   this.vy += this.accY;
 }
}
function onMouseMove(e) {
 mouse.x = e.clientX;
 mouse.y = e.clientY;
 }
 function onTouchMove(e) {
 if (e.touches.length > 0) {
   mouse.x = e.touches[0].clientX;
   mouse.y = e.touches[0].clientY;
 }
}
function onTouchEnd(e) {
 mouse.x = -9999;
 mouse.y = -9999;
}
function initScene() {
 ww = canvas.width = window.innerWidth;
 wh = canvas.height = window.innerHeight;
 ctx.clearRect(0, 0, canvas.width, canvas.height);
 link.rel = 'stylesheet';
 link.type = 'text/css';
 link.href = 'https://fonts.googleapis.com/css?family=Abril+Fatface';
 document.getElementsByTagName('head')[0].appendChild(link);
 ctx.font = 'bold 26vw "Abril Fatface"';
 ctx.textAlign = "center";
 ctx.fillText(headline.innerHTML, ww / 2, wh / 1.6);
 var data = ctx.getImageData(0, 0, ww, wh).data;
 ctx.clearRect(0, 0, canvas.width, canvas.height);
 ctx.globalCompositeOperation = "screen";
 particles = [];
 for (var i = 0; i < ww; i += Math.round(ww / 200)) {
   for (var j = 0; j < wh; j += Math.round(ww / 200)) {
     if (data[((i + j * ww) * 4) + 3] > 200) {
      
       particles.push(new Particle(i, j));
     }
   }
 }
 amount = particles.length;
}
相关插件-动画效果

基于jQuery实现的数字滚动插件(原创)

实现过程简单,支持设置总时长、总数以及运动的形式,本插件基于jQuery的animate方法,简单易懂,方便使用
  动画效果
 28988  338

可自定义形状文字的烟花(原创)

canvas仿烟花效果,代码注释全
  动画效果
 54446  444

js火焰特效

来自Doom PSX / Nintendo64的火焰效果
  动画效果
 23811  263

canvas 雨滴

这款动画主要是模拟了下雨的场景,雨滴从空中飘落,落在地上溅起水花,整个过程模拟得相当逼真。更重要的是,这款HTML5下雨动画还可以通过鼠标控制风向和雨水强度,鼠标左右滑动控制雨滴方向,鼠标上下滑动控制雨滴密度。
  动画效果
 28193  415

讨论这个项目(18)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    深抱怀中人?? 0
    2022/9/19 19:01:01
    现在是否支持图片? 回复
    叫我琛大大! 0
    2020/11/24 10:44:39
    怎么能让文字变小呢? 回复
    whitePure 0
    2019/8/18 17:22:08
    这个东西不兼容 火狐不行
        刘苗苗0
        2019/11/5 15:32:11
        我也试了,火狐加载特别慢
    回复
    jealous 0
    2019/6/3 19:56:21
    如何在更改了文字后让js的效果重新载入一遍啊,就是我用js改了文字后还是之前的文字特效没有刷新 回复
    console.log("Yy"); 0
    2019/5/13 9:22:53
    我想把它放在一个区域里 但是鼠标监听一直是在中间 怎么调呀
        console.log("Yy");1
        2019/5/13 9:42:31

        找到方法了,先调好自己想要的大小;

        function onMouseMove(e) {
            console.log(e);
            mouse.x = e.clientX;
            mouse.y = e.clientY;
        }

        然后在e.clientX后面做+/- 将鼠标悬停区域移动到你想要的位置!

    回复
    ♂零纪年〃微蓝一抹淡笑♀ 0
    2019/5/8 2:50:26
    能修改里面的字体吗
    回复
    Kyle╃? 0
    2019/4/11 19:46:56
    怎么把它变小呢?
    回复
    情深。 0
    2019/4/8 15:12:54
    支持图形 ? →什么的。多摸索摸索
        情深。0
        2019/4/8 15:13:27
        ?是心形 显示不出来
    回复
    许大官人? 0
    2019/3/21 10:34:51
    我的黑屏是什么原因?我是小白
        情深。0
        2019/4/8 15:06:42
        你是用什么浏览器打开的?
    回复
    放手のㄣ?福 0
    2019/3/18 17:12:03
    时间太长了,怎么把时间缩短了,粒子聚集的快点?
        情深。1
        2019/4/8 15:06:10
        Particle.prototype.render = function() {
          this.accX = (this.dest.x - this.x) / 1000;
          this.accY = (this.dest.y - this.y) / 1000;

        改 1000 这个数值 ,数值越小。速度越快

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复