jQuery 动态粒子效果

最新推荐文章于 2024-06-20 13:17:43 发布
最新推荐文章于 2024-06-20 13:17:43 发布
阅读量551 收藏
点赞数
分类专栏： Jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jack_rose_me/article/details/109050038
版权

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style>

html,body {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

    overflow: hidden;

}

.container{

    width: 100％;

    height: 100%;

    margin: 0;

    padding: 0;

    background-color: #000000;

}

</style>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

 

</head>

 

<body>

  <div id="jsi-particle-container" class="container"></div>

  <script>

    var RENDERER = {

  PARTICLE_COUNT : 1000,

  PARTICLE_RADIUS : 1,

  MAX_ROTATION_ANGLE : Math.PI / 60,

  TRANSLATION_COUNT : 500,

  

  init : function(strategy){

    this.setParameters(strategy);

    this.createParticles();

    this.setupFigure();

    this.reconstructMethod();

    this.bindEvent();

    this.drawFigure();

  },

  setParameters : function(strategy){

    this.$window = $(window);

    

    this.$container = $('#jsi-particle-container');

    this.width = this.$container.width();

    this.height = this.$container.height();

    

    this.$canvas = $('<canvas />').attr({width : this.width, height : this.height}).appendTo(this.$container);

    this.context = this.$canvas.get(0).getContext('2d');

    

    this.center = {x : this.width / 2, y : this.height / 2};

    

    this.rotationX = this.MAX_ROTATION_ANGLE;

    this.rotationY = this.MAX_ROTATION_ANGLE;

    this.strategyIndex = 0;

    this.translationCount = 0;

    this.theta = 0;

    

    this.strategies = strategy.getStrategies();

    this.particles = [];

  },

  createParticles : function(){

    for(var i = 0; i < this.PARTICLE_COUNT; i ++){

      this.particles.push(new PARTICLE(this.center));

    }

  },

  reconstructMethod : function(){

    this.setupFigure = this.setupFigure.bind(this);

    this.drawFigure = this.drawFigure.bind(this);

    this.changeAngle = this.changeAngle.bind(this);

  },

  bindEvent : function(){

    this.$container.on('click', this.setupFigure);

    this.$container.on('mousemove', this.changeAngle);

  },

  changeAngle : function(event){

    var offset = this.$container.offset(),

      x = event.clientX - offset.left + this.$window.scrollLeft(),

      y = event.clientY - offset.top + this.$window.scrollTop();

    

    this.rotationX = (this.center.y - y) / this.center.y * this.MAX_ROTATION_ANGLE;

    this.rotationY = (this.center.x - x) / this.center.x * this.MAX_ROTATION_ANGLE;

  },

  setupFigure : function(){

    for(var i = 0, length = this.particles.length; i < length; i++){

      this.particles[i].setAxis(this.strategies[this.strategyIndex]());

    }

    if(++this.strategyIndex == this.strategies.length){

      this.strategyIndex = 0;

    }

    this.translationCount = 0;

  },

  drawFigure : function(){

    requestAnimationFrame(this.drawFigure);

    

    this.context.fillStyle = 'rgba(0, 0, 0, 0.2)';

    this.context.fillRect(0, 0, this.width, this.height);

    

    for(var i = 0, length = this.particles.length; i < length; i++){

      var axis = this.particles[i].getAxis2D(this.theta);

      

      this.context.beginPath();

      this.context.fillStyle = axis.color;

      this.context.arc(axis.x, axis.y, this.PARTICLE_RADIUS, 0, Math.PI * 2, false);

      this.context.fill();

    }

    this.theta++;

    this.theta %= 360;

    

    for(var i = 0, length = this.particles.length; i < length; i++){

      this.particles[i].rotateX(this.rotationX);

      this.particles[i].rotateY(this.rotationY);

    }

    this.translationCount++;

    this.translationCount %= this.TRANSLATION_COUNT;

    

    if(this.translationCount == 0){

      this.setupFigure();

    }

  }

};

var STRATEGY = {

  SCATTER_RADIUS :150,

  CONE_ASPECT_RATIO : 1.5,

  RING_COUNT : 5,

  

  getStrategies : function(){

    var strategies = [];

    

    for(var i in this){

      if(this[i] == arguments.callee || typeof this[i] != 'function'){

        continue;

      }

      strategies.push(this[i].bind(this));

    }

    return strategies;

  },

  createSphere : function(){

    var cosTheta = Math.random() * 2 - 1,

      sinTheta = Math.sqrt(1 - cosTheta * cosTheta),

      phi = Math.random() * 2 * Math.PI;

      

    return {

      x : this.SCATTER_RADIUS * sinTheta * Math.cos(phi),

      y : this.SCATTER_RADIUS * sinTheta * Math.sin(phi),

      z : this.SCATTER_RADIUS * cosTheta,

      hue : Math.round(phi / Math.PI * 30)

    };

  },

  createTorus : function(){

    var theta = Math.random() * Math.PI * 2,

      x = this.SCATTER_RADIUS + this.SCATTER_RADIUS / 6 * Math.cos(theta),

      y = this.SCATTER_RADIUS / 6 * Math.sin(theta),

      phi = Math.random() * Math.PI * 2;

    

    return {

      x : x * Math.cos(phi),

      y : y,

      z : x * Math.sin(phi),

      hue : Math.round(phi / Math.PI * 30)

    };

  },

  createCone : function(){

    var status = Math.random() > 1 / 3,

      x,

      y,

      phi = Math.random() * Math.PI * 2,

      rate = Math.tan(30 / 180 * Math.PI) / this.CONE_ASPECT_RATIO;

    

    if(status){

      y = this.SCATTER_RADIUS * (1 - Math.random() * 2);

      x = (this.SCATTER_RADIUS - y) * rate;

    }else{

      y = -this.SCATTER_RADIUS;

      x = this.SCATTER_RADIUS * 2 * rate * Math.random();

    }

    return {

      x : x * Math.cos(phi),

      y : y,

      z : x * Math.sin(phi),

      hue : Math.round(phi / Math.PI * 30)

    };

  },

  createVase : function(){

    var theta = Math.random() * Math.PI,

      x = Math.abs(this.SCATTER_RADIUS * Math.cos(theta) / 2) + this.SCATTER_RADIUS / 8,

      y = this.SCATTER_RADIUS * Math.cos(theta) * 1.2,

      phi = Math.random() * Math.PI * 2;

    

    return {

      x : x * Math.cos(phi),

      y : y,

      z : x * Math.sin(phi),

      hue : Math.round(phi / Math.PI * 30)

    };

  }

};

var PARTICLE = function(center){

  this.center = center;

  this.init();

};

PARTICLE.prototype = {

  SPRING : 0.01,

  FRICTION : 0.9,

  FOCUS_POSITION : 300,

  COLOR : 'hsl(%hue, 100%, 70%)',

  

  init : function(){

    this.x = 0;

    this.y = 0;

    this.z = 0;

    this.vx = 0;

    this.vy = 0;

    this.vz = 0;

    this.color;

  },

  setAxis : function(axis){

    this.translating = true;

    this.nextX = axis.x;

    this.nextY = axis.y;

    this.nextZ = axis.z;

    this.hue = axis.hue;

  },

  rotateX : function(angle){

    var sin = Math.sin(angle),

      cos = Math.cos(angle),

      nextY = this.nextY * cos - this.nextZ * sin,

      nextZ = this.nextZ * cos + this.nextY * sin,

      y = this.y * cos - this.z * sin,

      z = this.z * cos + this.y * sin;

      

    this.nextY = nextY;

    this.nextZ = nextZ;

    this.y = y;

    this.z = z;

  },

  rotateY : function(angle){

    var sin = Math.sin(angle),

      cos = Math.cos(angle),

      nextX = this.nextX * cos - this.nextZ * sin,

      nextZ = this.nextZ * cos + this.nextX * sin,

      x = this.x * cos - this.z * sin,

      z = this.z * cos + this.x * sin;

      

    this.nextX = nextX;

    this.nextZ = nextZ;

    this.x = x;

    this.z = z;

  },

  rotateZ : function(angle){

    var sin = Math.sin(angle),

      cos = Math.cos(angle),

      nextX = this.nextX * cos - this.nextY * sin,

      nextY = this.nextY * cos + this.nextX * sin,

      x = this.x * cos - this.y * sin,

      y = this.y * cos + this.x * sin;

      

    this.nextX = nextX;

    this.nextY = nextY;

    this.x = x;

    this.y = y;

  },

  getAxis3D : function(){

    this.vx += (this.nextX - this.x) * this.SPRING;

    this.vy += (this.nextY - this.y) * this.SPRING;

    this.vz += (this.nextZ - this.z) * this.SPRING;

    

    this.vx *= this.FRICTION;

    this.vy *= this.FRICTION;

    this.vz *= this.FRICTION;

    

    this.x += this.vx;

    this.y += this.vy;

    this.z += this.vz;

    

    return {x : this.x, y : this.y, z : this.z};

  },

  getAxis2D : function(theta){

    var axis = this.getAxis3D(),

      scale = this.FOCUS_POSITION / (this.FOCUS_POSITION + axis.z);

      

    return {x : this.center.x + axis.x * scale, y : this.center.y - axis.y * scale, color : this.COLOR.replace('%hue', this.hue + theta)};

  }

};

$(function(){

  RENDERER.init(STRATEGY);

});

  </script>

</body>

</html>

林间风雨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
threejs + mapboxgl 实现粒子上升效果
jiegiser博客
09-12 2088
前言 这个也是我们实现的第一个特效，粒子上升图层；本例子是基于前面文章搭建的私库进行开发。 在三维渲染中，有可能会遇到需要在地图上展示一个粒子上升的效果来表达出，比较炫酷的效果，比如可以将粒子的图片设计成 xxx 产量，在地图上进行展示； 接下来我们实现一个自己的粒子上升效果； 粒子上升图层开发 新建一个FlyPatrial 图层，代码如下： import { BufferGeometry, Clock, Color, DoubleSide, Float32BufferAttribute, Mesh, S
H5粒子漂浮上升渐变背景特效
06-24
H5粒子漂浮上升渐变背景特效是一款基于HTML5 Canvas实现的蓝绿渐变背景和漂浮的粒子元素动画结合背景特效。
基于JavaScript粒子流动效果_粒子波动特效 js
最新发布
2401_85124286的博客
06-20 257
世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它。
HTML+CSS+JS实现 ❤️3D悬浮粒子翻转动效❤️
java李阳勇的博客
09-03 1521
效果演示： three基于canvas制作全屏的3D方块粒子悬停，跟随鼠标移动3D翻转动画特效。支持360度无死角翻转效果。 代码目录： 主要代码实现： html代码 : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="htt...
js实现屏幕粒子效果
qq_43730595的博客
01-09 579
js实现屏幕粒子效果
html+css+js炫酷特效+加速粒子效果
preserveXing的博客
03-18 6441
完整目录1.效果展示2.思路2.0布局2.1让火箭 位于屏幕的中心--flex2.2让火箭 上下不停的移动2.3利用::after 制造 尾部的火焰2.3使用js创建 < i > 并添加随机的大小和位置 颜色2.4使用js创建 < i > 插入 到页面上2.5给 < i > 添加 下落的动画2.6给 < i > 添加 下落的落差 感3.源码分享html+jscss 1.效果展示 2.思路 2.0布局 <body> <div c
前端粒子效果（particles.js）
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
07-23 1404
炫酷的粒子效果实现 下面这两种效果 particles.jshttps://www.jq22.com/yanshi9838 上面这种可以使用： particles.js webgl 或者canvas，css3该都可以 （下面是我找到的实现过程） https://blog.csdn.net/yeana1/article/details/52460490 https://blog.csdn.net/csdn_yudong/article/details/53128570 h...
jQuery 动态粒子效果示例代码
10-15
jQuery 动态粒子效果是一种视觉效果，常用于网站背景或者交互元素中，为网页增加动感和趣味性。本文将深入探讨如何使用jQuery实现这一效果，通过详细的示例代码帮助读者理解并掌握其实现方法。 首先，我们需要理解...
jQuery粒子动态背景特效特效代码
03-20
**jQuery粒子动态背景特效特效代码详解** 在网页设计中，动态背景可以提升用户体验，增加视觉吸引力。本篇文章将深入探讨如何使用jQuery与`jquery.particleground`插件创建一款鼠标响应式的粒子动态背景特效。 ...
jQuery粒子动态背景特效
04-02
jQuery粒子动态背景特效是一种在网页设计中常用的视觉效果，它利用JavaScript库jQuery来创建一个动态、交互式的背景，为用户提供更生动、引人入胜的浏览体验。这种特效通常由无数小点或图形组成，它们根据预设的规则...
jQuery粒子特效特效代码
03-20
jQuery粒子特效是一种常见的网页动态效果，它通过JavaScript库jQuery实现，为用户界面添加视觉吸引力。在本案例中，我们关注的是一个特别的粒子特效——"粒子星空鼠标移动特效"。这个特效使得网页背景如同星空般闪烁...
js特效html5轻量级炫酷js粒子动画库插件
10-11
html5轻量级炫酷js粒子动画库插件
【js特效】一款不错的漂浮悬浮效果
PHP在线开发笔记
09-07 2435
1.效果图如下： 【点击查看更多漂浮悬浮效果】
使用particles.js制造粒子特效
花生吃花生的学习记录
03-31 1817
先上效果图： 使用particles.js2.0版本进行制作。 目录结构 index.html 为主页面，app.js为入口文件，particles.json 为配置文件。 具体配置请参考：GitHub - VincentGarreau/particles.js: A lightweight JavaScript library for creating particles 源码： index.html： <!DOCTYPE html> <html lang="en
vue动态粒子背景效果-particles、threejs
m0_65720832的博客
11-28 1296
使用script标签引入，比较简单方便，但是效果比较单一，而且是在body上的背景，而vue又是单页面应用，所以说一个页面引入后其他页面也会有这个效果。引入vue-particles插件。使用threejs模拟粒子动态效果。引入particles插件。
JS实现悬浮移动窗口(悬浮广告)的特效
dayou7738的博客
09-26 1491
页面加载完成之后向页面插入窗口，之后向窗口插入关闭按钮，使用setInterval()函数触发moves（）函数开始动画 js方法： 复制代码代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt...
Vue中用three.js实现网站页面粒子特效
06-27 1118
前端使用vue2配合threejs实现粒子特效，切换，炫酷动画，可配置内容，可使用建模
【HTML——炫酷粒子】（效果+代码）| HTML前端多彩粒子特效（附代码）
追光者♂：记录、分享、总结、提升，现象级专栏《Python从入门到人工智能》作者，无惧黑暗，坚信曙光
10-03 2243
分享一个HTML——炫酷粒子的效果。【HTML——炫酷粒子】（效果+代码）| HTML前端多彩粒子特效（附代码）
JQ动态粒子效果
s_alin的博客
06-02 322
x = event.clientX - offset.left + this.$window.scrollLeft(),//clientX js鼠标事件。var offset = this.$container.offset(), //offset方法返回或设置匹配元素相对于文档的偏移（位置）/*overflow属性指定如果内容溢出一个元素的框，会发生什么 其属性值hidden表示内容会被修建，并且其余内容是不可见的*///translationCount动画过渡数量 影响点击颜色变化的深浅度。
HTML爱心粒子效果代码实现
- 页面底部的注释中定义了一个名为`settings`的对象，包含关于爱心粒子效果的各种参数，如粒子数量、持续时间、速度等。 - 使用立即执行函数（IIFE）封装代码，避免污染全局命名空间。 - `requestAnimationFrame`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值