Happy New Year 2020

HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="hny.css"> <title>Happy New Year</title> </head> <body> <h1>Happy <br> Lunar New Year <br> 2020 </h1> <iframe width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/590517252&color=%23ff5500&auto_play=true&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe> <script src="hyn.js"></script> </body> </html>
CSS
* { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; width: 100vw; display: flex; align-items: center; justify-content: center; } h1 { background-color: #FFC300; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: 'Brush Script MT', 'Brush Script Std', cursive; text-align: center; font-size: 5rem; font-weight: 700; letter-spacing: 2px; -webkit-text-stroke: 1px #C70039 ; paint-order: stroke fill; background-image: linear-gradient( -75deg, transparent 0, transparent 5%, rgba(255,255,255,0.5) 5%, rgba(255,255,255,0.5) 10%, transparent 10%, transparent 100% ); background-size: 200% 100%; -webkit-text-fill-color: transparent; -webkit-background-clip: text; transition: 1s; } h1:hover { background-position: -120% 0; }
JAVASCRIPT
const WIDTH = screen.availWidth; const HEIGHT = screen.availHeight; const PARTICLE_SIZE = 6.5; const PARTICLE_CHANGE_SIZE_SPEED = 0.07; const PARTICLE_CHANGE_SPEED = 0.5; const ACCELERATION = 0.1; const DOT_CHANGE_SIZE_SPEED = 0.15; const DOT_CHANGE_ALPHA_SPEED = 0.07; const PARTICLE_MIN_SPEED = 10; const NUMBER_PARTICLE_PER_BULLET = 25; class particle { constructor(bullet, deg) { this.bullet = bullet; this.ctx = bullet.ctx; this.deg = deg; this.x = this.bullet.x; this.y = this.bullet.y; this.color = this.bullet.color; this.size = PARTICLE_SIZE; this.speed = Math.random() * 4 + PARTICLE_MIN_SPEED; this.speedX = 0; this.speedY = 0; this.fallSpeed = 0; this.dots = []; } update() { this.speed -= PARTICLE_CHANGE_SPEED; if (this.speed < 0) { this.speed = 0; } // increase fall speed this.fallSpeed += ACCELERATION; this.speedX = this.speed * Math.cos(this.deg); this.speedY = this.speed * Math.sin(this.deg) + this.fallSpeed; // caculate position this.x += this.speedX; this.y += this.speedY; if (this.size > PARTICLE_CHANGE_SIZE_SPEED) { this.size -= PARTICLE_CHANGE_SIZE_SPEED; } if (this.size > 0) { this.dots.push({ x: this.x, y: this.y, alpha: 1, size: this.size }); } this.dots.forEach( dot => { dot.size -= DOT_CHANGE_SIZE_SPEED; dot.alpha -= DOT_CHANGE_ALPHA_SPEED; }); this.dots = this.dots.filter( dot => { return dot.size > 0; }); if (this.dots.length == 0){ this.remove(); } } remove() { this.bullet.particles.splice( this.bullet.particles.indexOf(this), 1 ); } draw() { this.dots.forEach( dot => { this.ctx.fillStyle = 'rgba('+this.color+','+dot.alpha+')'; this.ctx.beginPath(); this.ctx.arc(dot.x, dot.y, dot.size, 0, 2 * Math.PI); this.ctx.fill(); }); } } class bullet { constructor(fireworks) { this.fireworks = fireworks; this.ctx = fireworks.ctx; this.x = Math.random() * WIDTH; this.y = Math.random() * HEIGHT; this.color = Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255); this.particles = []; // create one particle let bulletDeg = Math.PI * 2 / NUMBER_PARTICLE_PER_BULLET; for (let i = 0; i < NUMBER_PARTICLE_PER_BULLET; i++) { let newParticle = new particle(this, i * bulletDeg); this.particles.push(newParticle); } } remove() { this.fireworks.bullets.splice( this.fireworks.bullets.indexOf(this), 1 ); } update(){ if (this.particles.length == 0){ this.remove(); } this.particles.forEach( particle => particle.update() ); } draw() { this.particles.forEach( particle => particle.draw() ); } } class fireworks { constructor() { this.canvas = document.createElement('canvas'); this.ctx = this.canvas.getContext('2d'); this.canvas.width = WIDTH; this.canvas.height = HEIGHT; document.body.appendChild(this.canvas); this.bullets = []; setInterval( () => { // create new bullet let newBullet = new bullet(this); this.bullets.push(newBullet); }, 500); this.loop(); } loop() { this.bullets.forEach( bullet => bullet.update() ); this.draw(); setTimeout( () => this.loop(), 20 ); } clearScreen() { this.ctx.fillStyle = '#000'; this.ctx.fillRect(0, 0, WIDTH, HEIGHT); } draw() { this.clearScreen(); this.bullets.forEach( bullet => bullet.draw() ); } } var f = new fireworks();
Expand for more options Login