炫酷的粒子偏差动画

炫酷的粒子偏差动画网页源码
在这篇文章中，我们将学习如何使用HTML、CSS和JavaScript创建一个令人印象深刻的粒子偏差动画。这个动画效果使用粒子在屏幕上自由移动，产生令人惊叹的视觉效果。

代码概览

这段代码的核心是使用HTML的Canvas元素以及JavaScript来生成和控制粒子的运动。以下是一些关键部分的介绍：

Canvas元素: 我们使用<canvas>元素作为动画效果的呈现区域，并将其全屏显示。
粒子生成: 通过JavaScript，我们生成了多个粒子，它们随机分布在屏幕上。每个粒子具有不同的颜色、大小和运动轨迹。
粒子运动: 粒子在屏幕上以不同的速度和轨迹移动。它们的运动路径会受到随机因素的影响，从而创造出有趣的效果。
动态更新: 我们使用Canvas上的动态渲染来不断更新粒子的位置和呈现效果。这使得粒子看起来就像是在屏幕上自由漂浮。

效果展示

炫酷的粒子偏差动画

这段代码会在浏览器中创建一个令人印象深刻的粒子偏差动画。粒子以不同颜色和大小绘制在屏幕上，它们自由移动，产生出一种动态的、有趣的效果。

如何使用

要在你的网站中使用这个效果，只需将以上代码嵌入到你的HTML文件中，并确保引用了所需的JavaScript库。然后，你可以在页面加载时触发动画效果，为你的网站增加炫酷的背景。

注意：jquery文件是托管在guthub的，打不开可以更换到本地


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>粒子偏差动画</title>
<script src="https://pengsirs.github.io/51xk/7/js/jquery.min.js"></script>
<style>
@import url("https://fonts.googleapis.com/css?family=Montserrat:200,300,400,600");
.more-pens {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 10;
  font-family: "Montserrat";
  font-size: 12px;
}

a.white-mode, a.white-mode:link, a.white-mode:visited, a.white-mode:active {
  font-family: "Montserrat";
  font-size: 12px;
  text-decoration: none;
  background: #212121;
  padding: 4px 8px;
  color: #f7f7f7;
}
a.white-mode:hover, a.white-mode:link:hover, a.white-mode:visited:hover, a.white-mode:active:hover {
  background: #edf3f8;
  color: #212121;
}

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: #000000;
}

.title {
  z-index: 10;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  font-family: "Montserrat";
  text-align: center;
  width: 100%;
}
.title h1 {
  position: relative;
  color: #EEEEEE;
  font-weight: 600;
  font-size: 60px;
  padding: 0;
  margin: 0;
  line-height: 1;
  text-shadow: 0 0 30px #000155;
}
.title h1 span {
  font-weight: 600;
  padding: 0;
  margin: 0;
  color: #BBB;
}
.title h3 {
  font-weight: 200;
  font-size: 20px;
  padding: 0;
  margin: 0;
  line-height: 1;
  color: #EEEEEE;
  letter-spacing: 2px;
  text-shadow: 0 0 30px #000155;
}
</style>
</head>
<body>

<div class="title">
    <h3>51xk.cn - 2023</h3>
    <h1>51炫酷网</h1>
    <h3>Deviation of pengsirs.com</h3>
</div>

<script>
'use strict';

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var max_particles = 1000;

var tela = document.createElement('canvas');
tela.width = $(window).width();
tela.height = $(window).height();
$("body").append(tela);

var canvas = tela.getContext('2d');

var Particle = function () {
  function Particle(canvas, progress) {
    _classCallCheck(this, Particle);

    var random = Math.random();
    this.progress = 0;
    this.canvas = canvas;

    this.x = $(window).width() / 2 + (Math.random() * 200 - Math.random() * 200);
    this.y = $(window).height() / 2 + (Math.random() * 200 - Math.random() * 200);

    this.w = $(window).width();
    this.h = $(window).height();
    this.radius = random > .2 ? Math.random() * 1 : Math.random() * 3;
    this.color = random > .2 ? "#d8002c" : "#F9314C";
    this.radius = random > .8 ? Math.random() * 2 : this.radius;
    this.color = random > .8 ? "#7DFFF2" : this.color;

    // this.color  = random > .1 ? "#ffae00" : "#f0ff00" // Alien
    this.variantx1 = Math.random() * 300;
    this.variantx2 = Math.random() * 400;
    this.varianty1 = Math.random() * 100;
    this.varianty2 = Math.random() * 120;
  }

  Particle.prototype.render = function render() {
    this.canvas.beginPath();
    this.canvas.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
    this.canvas.lineWidth = 2;
    this.canvas.fillStyle = this.color;
    this.canvas.fill();
    this.canvas.closePath();
  };

  Particle.prototype.move = function move() {
    // this.x += (Math.sin(this.progress/this.variantx1)*Math.cos(this.progress/this.variantx2));
    // this.y += (Math.sin(this.progress/this.varianty1)*Math.cos(this.progress/this.varianty2));
    this.x += Math.sin(this.progress / this.variantx1) * Math.cos(this.progress / this.variantx2);
    this.y += Math.cos(this.progress / this.varianty2);

    if (this.x < 0 || this.x > this.w - this.radius) {
      return false;
    }

    if (this.y < 0 || this.y > this.h - this.radius) {
      return false;
    }
    this.render();
    this.progress++;
    return true;
  };

  return Particle;
}();

var particles = [];
var init_num = popolate(max_particles);

function popolate(num) {
  for (var i = 0; i < num; i++) {
    setTimeout(function () {
      particles.push(new Particle(canvas, i));
    }.bind(this), i * 20);
  }
  return particles.length;
}

function clear() {
  canvas.globalAlpha = 0.05;
  canvas.fillStyle = '#000';
  canvas.fillRect(0, 0, tela.width, tela.height);
  canvas.globalAlpha = 1;
}

function update() {
  particles = particles.filter(function (p) {
    return p.move();
  });
  if (particles.length < init_num) {
    popolate(1);
  }
  clear();
  requestAnimationFrame(update.bind(this));
}
update();
</script>
</body>
</html>