https://seashell-bat-940245.hostingersite.com/wp-content/plugins/l…/shortcodes/effects/sparkle_fire.js

1// https://codepen.io/oinochoe/pen/VOQKej
2
3jQuery(function(){
4function _toConsumableArray(arr) {
5 if(Array.isArray(arr)) {
6  for (var i=0, arr2 = Array(arr.length); i< arr.length; i++ ) {
7   arr2[i] = arr[i];
8  }
9  return arr2;
10 } else{
11   return Array.from(arr);
12 }
13}
14
15function spark(pos, config) {
16  this.config = config || {size: 2, angle: 1, range:30};
17 
18 this.init = function(pos) {
19  this.position = {x: pos.x + (Math.random() * 60 - 30 ) * this.config.range, y: pos.y + (Math.random() * 10 - 5)};
20  this.velocity = {angle: (Math.random() - 0.5) * Math.PI * this.config.angle + Math.PI * 1.5, weight: Math.random() * 15 + 5};
21  this.gravity = {angle: (Math.random() - 0.5) * 0.25 + Math.PI * 1.5, chance: (Math.random() - 0.5) * 0.25, weight: Math.random() * 2 + 4 };
22  this.prevPosition = this.position;
23  this.lifespan = Math.random() * 200 + 60;
24  this.alpha = Math.random() * 30 + 30;
25  this.next = Math.random() * 600;
26 };
27 
28 this.update = function(pos) {
29   if(--this.next > 0) {
30    return;
31   }
32  this.prevPosition = {x: this.position.x, y: this.position.y} ;
33  this.position.x += Math.cos(this.velocity.angle) * this.velocity.weight + Math.cos(this.gravity.angle) * this.gravity.weight;
34  this.position.y += Math.sin(this.velocity.angle) * this.velocity.weight + Math.sin(this.gravity.angle) * this.gravity.weight;
35  
36  this.velocity.weight *= 0.96;
37  this.velocity.angle += this.gravity.chance;
38  --this.lifespan <= 0 ? this.init(pos) : null;
39  
40 };
41 
42 this.render = function (ctx) {
43  ctx.strokeStyle = colors[Math.round(Math.random() * (colors.length - 1))];
44  ctx.lineWidth = this.velocity.weight * 0.12 * this.config.size;
45  ctx.globalAlpha = this.lifespan / this.alpha;
46  ctx.beginPath();
47  ctx.moveTo(this.position.x, this.position.y);
48  ctx.lineTo(this.prevPosition.x, this.prevPosition.y);
49  ctx.closePath();
50  ctx.stroke();
51  ctx.lineWidth = 1;
52  ctx.globalAlpha = 1;
53 };
54 
55 this.init(pos);
56 
57}
58
59
60var main = {
61 canvas: document.getElementById('lte-sparkle-fire-canvas'),
62 buffer: document.getElementById('lte-sparkle-fire-buffer'),
63 ctx: null,
64 eff: null,
65 width: window.innerWidth,
66 height: window.innerHeight,
67 fire:[],
68 sparks:[],
69 total:200,
70 position: { x: window.innerWidth * 0.5, y: window.innerHeight },
71 init: function init() {
72  var _this = this;
73     
74  this.registerEvents();
75  this.ctx = this.canvas.getContext('2d');
76  this.ctx.globalCompositeOperation = 'screen';
77  this.eff = this.buffer.getContext('2d');
78  this.eff.globalCompositeOperation = 'screen';
79  [].concat(_toConsumableArray(Array(this.total * 2.5).keys())).forEach(function (i) {
80    _this.fire.push(new spark(_this.position, { size: 2.5, angle: 0.5, range: 2.5 }));
81  });
82  [].concat(_toConsumableArray(Array(this.total).keys())).forEach(function(i){
83    _this.sparks.push(new spark(_this.position));
84  });
85  
86  //
87  this.resize();
88 },
89 update : function update() {
90  var position = this.position;
91  this.sparks.forEach(function(s) {
92    return s.update(position);
93  });
94 },
95 render : function render() {
96  var ctx = this.ctx;
97  var eff = this.eff;
98  ctx.clearRect(0, 0, this.width, this.height);
99  
100  eff.clearRect(0, 0, this.width, this.height);
101  this.sparks.forEach(function (s) {
102    s.render(eff);
103  });
104 },
105 resize : function resize() {
106  this.width = window.innerWidth;
107  this.height = window.innerHeight;
108  this.canvas.width = this.width;
109  this.canvas.height = this.height;
110  this.buffer.width = this.width;
111  this.buffer.height = this.height;
112  this.position.x = this.width * 0.5;
113  this.position.y = this.height;
114 },
115 registerEvents: function registerEvents() {
116   var _this2 = this;
117  
118   window.addEventListener('resize', function() {
119     _this2.resize();
120   }, false);
121 }
122};
123
124var colors = ['#ff6b14', '#ff6b14', '#ff6b14', '#ff6b14', '#ff6b14', '#ff6b14']
125
126main.init();
127 (function loop() {
128   main.update();
129   main.render();
130   requestAnimationFrame(loop);
131 })();
132 
133 });