74 lines
2.8 KiB
JavaScript
74 lines
2.8 KiB
JavaScript
/**
|
|
* Main Interaction Script
|
|
* Minimalist animations and custom cursor for that "Premium WIP" feel.
|
|
*/
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// Custom Cursor Logic
|
|
const cursorDot = document.querySelector('.cursor-dot');
|
|
const cursorOutline = document.querySelector('.cursor-outline');
|
|
let isHovering = false;
|
|
|
|
// Track mouse position
|
|
window.addEventListener('mousemove', (e) => {
|
|
const posX = e.clientX;
|
|
const posY = e.clientY;
|
|
|
|
// Custom dot follows exact position
|
|
cursorDot.style.left = `${posX}px`;
|
|
cursorDot.style.top = `${posY}px`;
|
|
|
|
// Outline trails slightly with a small delay simulation via animationFrame
|
|
// But for simplicity and performance in vanilla, we use transform directly
|
|
cursorOutline.animate({
|
|
left: `${posX}px`,
|
|
top: `${posY}px`
|
|
}, { duration: 150, fill: "forwards" });
|
|
});
|
|
|
|
// Hover effects on links and interactive elements
|
|
const links = document.querySelectorAll('a, .status-badge, .art-piece-container');
|
|
|
|
links.forEach(link => {
|
|
link.addEventListener('mouseenter', () => {
|
|
isHovering = true;
|
|
cursorOutline.style.transform = 'translate(-50%, -50%) scale(1.5)';
|
|
cursorOutline.style.backgroundColor = 'rgba(0,0,0,0.1)';
|
|
cursorDot.style.transform = 'translate(-50%, -50%) scale(0.5)';
|
|
});
|
|
|
|
link.addEventListener('mouseleave', () => {
|
|
isHovering = false;
|
|
cursorOutline.style.transform = 'translate(-50%, -50%) scale(1)';
|
|
cursorOutline.style.backgroundColor = 'transparent';
|
|
cursorDot.style.transform = 'translate(-50%, -50%) scale(1)';
|
|
});
|
|
});
|
|
|
|
// Simple 3D parallax on the art piece
|
|
const artContainer = document.querySelector('.art-piece-container');
|
|
const artPiece = document.querySelector('.art-piece');
|
|
|
|
if (artContainer && artPiece) {
|
|
artContainer.addEventListener('mousemove', (e) => {
|
|
const rect = artContainer.getBoundingClientRect();
|
|
const x = e.clientX - rect.left; // x position within the element.
|
|
const y = e.clientY - rect.top; // y position within the element.
|
|
|
|
// Calculate rotation based on cursor position
|
|
const centerX = rect.width / 2;
|
|
const centerY = rect.height / 2;
|
|
|
|
const rotateX = ((y - centerY) / centerY) * -15; // Max 15deg
|
|
const rotateY = ((x - centerX) / centerX) * 15; // Max 15deg
|
|
|
|
artPiece.style.transform = `scale(1.05) perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
|
|
});
|
|
|
|
artContainer.addEventListener('mouseleave', () => {
|
|
// Reset position
|
|
artPiece.style.transform = 'scale(1) perspective(1000px) rotateX(0) rotateY(0)';
|
|
});
|
|
}
|
|
});
|