File size: 2,156 Bytes
25a0ef6 8d1c407 25a0ef6 8d1c407 25a0ef6 8d1c407 25a0ef6 8d1c407 25a0ef6 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | // Main JavaScript file for functionality
document.addEventListener('DOMContentLoaded', function() {
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
targetElement.scrollIntoView({
behavior: 'smooth'
});
}
});
});
// 3D Mouse Movement Effect
const handleMouseMove = (e) => {
const xAxis = (window.innerWidth / 2 - e.pageX) / 25;
const yAxis = (window.innerHeight / 2 - e.pageY) / 25;
document.querySelector('main').style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
};
// Animation for elements when they come into view
const animateOnScroll = () => {
const elements = document.querySelectorAll('.animate-on-scroll');
elements.forEach(element => {
const elementPosition = element.getBoundingClientRect().top;
const windowHeight = window.innerHeight;
if (elementPosition < windowHeight - 100) {
const depth = element.dataset.depth || 0;
element.style.transform = `translateZ(${depth}px)`;
element.classList.add('animate-fadeInUp');
}
});
};
// Add mouse move event
document.addEventListener('mousemove', handleMouseMove);
// Initialize animation on load and scroll
window.addEventListener('load', animateOnScroll);
window.addEventListener('scroll', animateOnScroll);
// Form submission handling
const contactForm = document.querySelector('form');
if (contactForm) {
contactForm.addEventListener('submit', function(e) {
e.preventDefault();
// Here you would typically send the form data to a server
alert('Thank you for your message! I will get back to you soon.');
this.reset();
});
}
}); |