sageTheDm/pages
1
0
Fork 0
forked from interstellar_development/interstellar_website
Code Pull requests Activity

@patrick fix the smoothness of the animations please

Browse source
This commit is contained in:
sageTheDM 2025-10-20 15:24:43 +02:00
parent fd57d47956
commit 6e98a0c133
3 changed files with 21 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

46
src/js/animation/Meteor.js
View file

@ -7,34 +7,34 @@ class Meteor {
this.life = 1.0;
this.particles = [];
// Enhanced color palette
this.colorType = Math.floor(Math.random() * 4);
this.colors = this.getMeteorColors();
// Get container dimensions for pixel-based positioning
this.containerRect = container.getBoundingClientRect();
// Start from random edge with PIXEL-based positioning
const edge = Math.floor(Math.random() * 4);
if (edge === 0) {
// Top
this.x = Math.random() * this.containerRect.width;
this.y = -20;
} else if (edge === 1) {
// Right
this.x = this.containerRect.width + 20;
this.y = Math.random() * this.containerRect.height;
} else if (edge === 2) {
// Bottom
this.x = Math.random() * this.containerRect.width;
this.y = this.containerRect.height + 20;
} else {
// Left
this.x = -20;
this.y = Math.random() * this.containerRect.height;
switch (edge) {
case 0:
// Top
this.x = Math.random() * this.containerRect.width;
this.y = -20;
case 1:
// Right
this.x = this.containerRect.width + 20;
this.y = Math.random() * this.containerRect.height;
case 2:
// Bottom
this.x = Math.random() * this.containerRect.width;
this.y = this.containerRect.height + 20;
case 3:
// Left
this.x = -20;
this.y = Math.random() * this.containerRect.height;
default:
console.log("Error creating Meteor direction");
}
// More dynamic movement patterns
const centerX = this.containerRect.width / 2 + (Math.random() - 0.5) * 200;
const centerY = this.containerRect.height / 2 + (Math.random() - 0.5) * 200;
this.angle =
@ -84,7 +84,6 @@ class Meteor {
const size = Math.random() * 4 + 10;
const colors = this.colors;
// Create enhanced meteor head with multiple layers
const head = document.createElement("div");
head.style.width = `${size}px`;
head.style.height = `${size}px`;
@ -127,7 +126,6 @@ class Meteor {
this.container.appendChild(this.element);
// Add trail particles
this.createTrailParticles();
}
@ -159,7 +157,6 @@ class Meteor {
}
createTrailParticles() {
// Create initial trail particles
for (let i = 0; i < 5; i++) {
this.addTrailParticle();
}
@ -196,12 +193,10 @@ class Meteor {
}
update() {
// Smooth pixel-based movement
this.x += this.dx;
this.y += this.dy;
this.life -= 0.005;
// Use pixel positioning for smooth movement
this.element.style.left = `${this.x}px`;
this.element.style.top = `${this.y}px`;
this.element.style.opacity = this.life;
@ -216,7 +211,6 @@ class Meteor {
}
});
// Add new trail particles periodically
if (Math.random() < 0.3) {
this.addTrailParticle();
}
@ -239,7 +233,6 @@ class Meteor {
}
}
// Enhanced removal condition with fading
if (
this.x < -50 ||
this.x > this.containerRect.width + 50 ||
@ -260,7 +253,6 @@ class Meteor {
}
remove() {
// Add explosion effect when meteor dies
if (this.life > 0.3) {
this.createExplosion();
}