94 lines
2.7 KiB
JavaScript
94 lines
2.7 KiB
JavaScript
// Particle background effect
|
|
const canvas = document.createElement('canvas');
|
|
canvas.style.position = 'fixed';
|
|
canvas.style.top = '0';
|
|
canvas.style.left = '0';
|
|
canvas.style.width = '100vw';
|
|
canvas.style.height = '100vh';
|
|
canvas.style.zIndex = '-2';
|
|
canvas.style.pointerEvents = 'none';
|
|
document.body.appendChild(canvas);
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
let particles = [];
|
|
|
|
function resize() {
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
}
|
|
|
|
window.addEventListener('resize', resize);
|
|
resize();
|
|
|
|
class Particle {
|
|
constructor() {
|
|
this.x = Math.random() * canvas.width;
|
|
this.y = Math.random() * canvas.height;
|
|
this.size = Math.random() * 2;
|
|
this.speedX = Math.random() * 1 - 0.5;
|
|
this.speedY = Math.random() * 1 - 0.5;
|
|
this.opacity = Math.random() * 0.5 + 0.1;
|
|
}
|
|
update() {
|
|
this.x += this.speedX;
|
|
this.y += this.speedY;
|
|
if (this.x > canvas.width) this.x = 0;
|
|
if (this.x < 0) this.x = canvas.width;
|
|
if (this.y > canvas.height) this.y = 0;
|
|
if (this.y < 0) this.y = canvas.height;
|
|
}
|
|
draw() {
|
|
ctx.fillStyle = `rgba(255, 255, 255, ${this.opacity})`;
|
|
ctx.beginPath();
|
|
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
}
|
|
}
|
|
|
|
function init() {
|
|
for (let i = 0; i < 80; i++) {
|
|
particles.push(new Particle());
|
|
}
|
|
}
|
|
|
|
function animate() {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
for (let i = 0; i < particles.length; i++) {
|
|
particles[i].update();
|
|
particles[i].draw();
|
|
}
|
|
requestAnimationFrame(animate);
|
|
}
|
|
|
|
init();
|
|
animate();
|
|
|
|
// 3D Tilt effect on cards
|
|
const cards = document.querySelectorAll('.nav-group');
|
|
cards.forEach(card => {
|
|
card.addEventListener('mousemove', e => {
|
|
const rect = card.getBoundingClientRect();
|
|
const x = e.clientX - rect.left;
|
|
const y = e.clientY - rect.top;
|
|
|
|
const centerX = rect.width / 2;
|
|
const centerY = rect.height / 2;
|
|
|
|
const rotateX = ((y - centerY) / centerY) * -4;
|
|
const rotateY = ((x - centerX) / centerX) * 4;
|
|
|
|
// Apply inline styles. Combine with CSS transform if needed.
|
|
card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-8px)`;
|
|
card.style.transition = 'none';
|
|
});
|
|
|
|
card.addEventListener('mouseleave', () => {
|
|
card.style.transition = 'all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)';
|
|
card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) translateY(0)';
|
|
});
|
|
|
|
card.addEventListener('mouseenter', () => {
|
|
card.style.transition = 'all 0.1s ease';
|
|
});
|
|
});
|