22/02/2025
manda un mensaje personalizado en una pagina html escrita con java script....puedes mandar el documento por watsapp , recuerda debes nombrarlo con terminacion .html modifica la dedicatoria en la linea 25 del codigo donde dice birthday message, y poner tu mensaje donde dice ¡felicidades¡ ya guasdar erl archivo .html, despues mandalo por el medio de tu preferencia aqui les dejo el codigo y en el primer comentario:
Fuegos Artificiales - Felicidades
body { margin: 0; overflow: hidden; background: black; }
canvas { display: block; }
{
position: absolute;
top: 40%;
width: 100%;
text-align: center;
font-size: 50px;
font-weight: bold;
font-family: Arial, sans-serif;
opacity: 0;
transition: opacity 1s ease-in-out;
}
¡Felicidades! 🎉🎂
const canvas = document.getElementById("fireworksCanvas");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let fireworks = [];
let messageVisible = false;
class Particle {
constructor(x, y, color, angle, speed) {
this.x = x;
this.y = y;
this.color = color;
this.angle = angle;
this.speed = speed;
this.life = 240;
}
move() {
this.x += Math.cos(this.angle) * this.speed;
this.y += Math.sin(this.angle) * this.speed + 0.2; // Simula la gravedad
this.speed *= 0.98;
this.life -= 3;
}
draw(ctx) {
if (this.life > 0) {
ctx.fillStyle = `rgba(${this.color[0]}, ${this.color[1]}, ${this.color[2]}, ${this.life / 240})`;
ctx.beginPath();
ctx.arc(this.x, this.y, 3, 0, Math.PI * 2);
ctx.fill();
}
}
}
class Firework {
constructor() {
this.x = Math.random() * canvas.width;
this.y = canvas.height;
this.speed = Math.random() * 10 + 6;
this.trail = [];
this.exploded = false;
this.particles = [];
this.explosionHeight = Math.random() * (canvas.height / 2) + canvas.height / 4;
this.color = [Math.random() * 255, Math.random() * 255, Math.random() * 255];
}
update() {
if (!this.exploded) {
this.y -= this.speed;
this.trail.push([this.x, this.y]);
if (this.y p.move());
this.particles = this.particles.filter(p => p.life > 0);
}
}
explode() {
this.exploded = true;
let numParticles = 200;
for (let i = 0; i < numParticles; i++) {
let angle = (Math.PI * 2 / numParticles) * i + (Math.random() * 0.2 - 0.1);
let speed = Math.random() * 4 + 2;
this.particles.push(new Particle(this.x, this.y, this.color, angle, speed));
}
}
draw(ctx) {
if (!this.exploded) {
ctx.fillStyle = `rgb(${this.color[0]}, ${this.color[1]}, ${this.color[2]})`;
ctx.beginPath();
ctx.arc(this.x, this.y, 5, 0, Math.PI * 2);
ctx.fill();
}
this.particles.forEach(p => p.draw(ctx));
}
}
function animate() {
ctx.fillStyle = "rgba(10, 0, 30, 0.3)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
fireworks.forEach(fw => fw.update());
fireworks.forEach(fw => fw.draw(ctx));
fireworks = fireworks.filter(fw => !fw.exploded || fw.particles.length > 0);
if (Math.random() < 0.03) {
fireworks.push(new Firework());
}
requestAnimationFrame(animate);
}
animate();
window.addEventListener("resize", () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
// Mostrar el mensaje después de 3 segundos
setTimeout(() => {
let message = document.getElementById("birthdayMessage");
message.style.opacity = 1;
messageVisible = true;
// Hacer que el mensaje parpadee en diferentes colores
setInterval(() => {
if (messageVisible) {
let r = Math.floor(Math.random() * 255);
let g = Math.floor(Math.random() * 255);
let b = Math.floor(Math.random() * 255);
message.style.color = `rgb(${r}, ${g}, ${b})`;
}
}, 500);
}, 3000);
