Chúc mừng năm mới, hôm nay mình sưu tầm được 1 đoạn code pháo hoa khá đẹp mặt nên mình đã tích hợp nó vào theme Flatsome và share cho mọi người cùng dùng nhé.
-
Bắt đầu làm thôi nào
Các bạn thêm đoạn code dưới đây vào file function là được, vì mình đã tích hợp hết rồi nhé.
Đoạn code hiển thị hiệu ứng pháo hoa cực đẹp cho flastome – WordPress
Đoạn code hiển thị hiệu ứng pháo hoa cực đẹp cho flastome – WordPress
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 |
function firework_pt(){;?> <script> jQuery(document).ready(function ($) { $("#content").append("<canvas id='canvas'></canvas>"); const PARTICLES_PER_FIREWORK = 150; // 100 - 400 or try 1000 const FIREWORK_CHANCE = 0.02; // percentage, set to 0 and click instead const BASE_PARTICLE_SPEED = 0.6; // between 0-4, controls the size of the overall fireworks const FIREWORK_LIFESPAN = 600; // ms const PARTICLE_INITIAL_SPEED = 4.5; // 2-8 // not so fun options =\ const GRAVITY = 9.8; const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); let particles = []; let disableAutoFireworks = false; let resetDisable = 0; let loop = () => { if (!disableAutoFireworks && Math.random() < FIREWORK_CHANCE) { createFirework(); } ctx.clearRect(0, 0, canvas.width, canvas.height); particles.forEach((particle, i) => { particle.animate(); particle.render(); if (particle.y > canvas.height || particle.x < 0 || particle.x > canvas.width || particle.alpha <= 0 ) { particles.splice(i, 1); } }); requestAnimationFrame(loop); }; let createFirework = ( x = Math.random() * canvas.width, y = Math.random() * canvas.height ) => { let speed = (Math.random() * 2) + BASE_PARTICLE_SPEED; let maxSpeed = speed; let red = ~~(Math.random() * 255); let green = ~~(Math.random() * 255); let blue = ~~(Math.random() * 255); // use brighter colours red = (red < 150 ? red + 150 : red); green = (green < 150 ? green + 150 : green); blue = (blue < 150 ? blue + 150 : blue); // inner firework for (let i = 0; i < PARTICLES_PER_FIREWORK; i++) { let particle = new Particle(x, y, red, green, blue, speed); particles.push(particle); maxSpeed = (speed > maxSpeed ? speed : maxSpeed); } // outer edge particles to make the firework appear more full for (let i = 0; i < 40; i++) { let particle = new Particle(x, y, red, green, blue, maxSpeed, true); particles.push(particle); } }; class Particle { constructor( x = 0, y = 0, red = ~~(Math.random() * 255), green = ~~(Math.random() * 255), blue = ~~(Math.random() * 255), speed, isFixedSpeed ) { this.x = x; this.y = y; this.red = red; this.green = green; this.blue = blue; this.alpha = 0.05; this.radius = 1 + Math.random(); this.angle = Math.random() * 360; this.speed = (Math.random() * speed) + 0.1; this.velocityX = Math.cos(this.angle) * this.speed; this.velocityY = Math.sin(this.angle) * this.speed; this.startTime = (new Date()).getTime(); this.duration = Math.random() * 300 + FIREWORK_LIFESPAN; this.currentDiration = 0; this.dampening = 30; // slowing factor at the end this.colour = this.getColour(); if (isFixedSpeed) { this.speed = speed; this.velocityY = Math.sin(this.angle) * this.speed; this.velocityX = Math.cos(this.angle) * this.speed; } this.initialVelocityX = this.velocityX; this.initialVelocityY = this.velocityY; } animate() { this.currentDuration = (new Date()).getTime() - this.startTime; // initial speed kick if (this.currentDuration <= 200) { this.x += this.initialVelocityX * PARTICLE_INITIAL_SPEED; this.y += this.initialVelocityY * PARTICLE_INITIAL_SPEED; this.alpha += 0.01; this.colour = this.getColour(240, 240, 240, 0.9); } else { // normal expansion this.x += this.velocityX; this.y += this.velocityY; this.colour = this.getColour(this.red, this.green, this.blue, 0.4 + (Math.random() * 0.3)); } this.velocityY += GRAVITY / 1000; // slow down particles at the end if (this.currentDuration >= this.duration) { this.velocityX -= this.velocityX / this.dampening; this.velocityY -= this.velocityY / this.dampening; } if (this.currentDuration >= this.duration + this.duration / 1.1) { // fade out at the end this.alpha -= 0.02; this.colour = this.getColour(); } else { // fade in during expansion if (this.alpha < 1) { this.alpha += 0.03; } } } render() { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true); ctx.lineWidth = this.lineWidth; ctx.fillStyle = this.colour; ctx.shadowBlur = 8; ctx.shadowColor = this.getColour(this.red + 150, this.green + 150, this.blue + 150, 1); ctx.fill(); } getColour(red, green, blue, alpha) { return `rgba({red || this.red}, ${green || this.green}, ${blue || this.blue}, ${alpha || this.alpha})`; } } let updateCanvasSize = () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }; // run it! updateCanvasSize(); $(window).resize(updateCanvasSize); $(canvas).on('click', (e) => { createFirework(e.clientX, e.clientY); // stop fireworks when clicked, re-enable after short time disableAutoFireworks = true; clearTimeout(resetDisable); resetDisable = setTimeout(() => { disableAutoFireworks = false; }, 1000); }); loop(); }); </script> <style> #canvas{ position:fixed!important; top:0; left:0; z-index:1!important; } #content>*{ z-index:2; position:relative; } .page-title{ z-index:3!important; } </style> <?php } add_action('wp_footer','firework_pt'); |
Chúc các bạn thành công và chúc mừng năm mới, hi vọng bài viết này của mình sẽ giúp website của các bạn được sinh động hơn.
