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();