80 lines
2.6 KiB
JavaScript
80 lines
2.6 KiB
JavaScript
// Smooth scroll pour les liens d'ancrage
|
|
const links = document.querySelectorAll('a[href^="#"]');
|
|
|
|
links.forEach(link => {
|
|
link.addEventListener('click', event => {
|
|
const targetId = link.getAttribute('href');
|
|
if (targetId.length > 1) {
|
|
event.preventDefault();
|
|
const target = document.querySelector(targetId);
|
|
if (target) {
|
|
target.scrollIntoView({
|
|
behavior: 'smooth',
|
|
block: 'start'
|
|
});
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
// Gestion du formulaire de contact
|
|
const contactForm = document.getElementById('contactForm');
|
|
const formFeedback = document.getElementById('formFeedback');
|
|
|
|
if (contactForm) {
|
|
contactForm.addEventListener('submit', event => {
|
|
event.preventDefault();
|
|
|
|
const formData = new FormData(contactForm);
|
|
const name = formData.get('name').trim();
|
|
const email = formData.get('email').trim();
|
|
const message = formData.get('message').trim();
|
|
|
|
// Validation simple
|
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
|
|
if (name && emailRegex.test(email) && message) {
|
|
formFeedback.textContent = `Merci ${name}, ton message a bien été reçu !`;
|
|
formFeedback.className = 'form__feedback success';
|
|
formFeedback.style.display = 'block';
|
|
contactForm.reset();
|
|
|
|
// Masquer le message après 5 secondes
|
|
setTimeout(() => {
|
|
formFeedback.style.display = 'none';
|
|
}, 5000);
|
|
} else {
|
|
formFeedback.textContent = 'Merci de remplir tous les champs avec des informations valides.';
|
|
formFeedback.className = 'form__feedback error';
|
|
formFeedback.style.display = 'block';
|
|
}
|
|
});
|
|
}
|
|
|
|
const currentYearElement = document.getElementById('currentYear');
|
|
if (currentYearElement) {
|
|
currentYearElement.textContent = new Date().getFullYear();
|
|
}
|
|
|
|
// Animation au scroll (optionnel, pour un effet plus subtil)
|
|
const observerOptions = {
|
|
threshold: 0.1,
|
|
rootMargin: '0px 0px -50px 0px'
|
|
};
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.style.opacity = '1';
|
|
entry.target.style.transform = 'translateY(0)';
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
// Appliquer l'animation aux cartes
|
|
document.querySelectorAll('.card, .timeline__item').forEach(el => {
|
|
el.style.opacity = '0';
|
|
el.style.transform = 'translateY(20px)';
|
|
el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
|
|
observer.observe(el);
|
|
}); |