56 lines
1.9 KiB
JavaScript
56 lines
1.9 KiB
JavaScript
// Fonction pour les images de fond en section 1
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const bgElements = document.querySelectorAll('.set-bg');
|
|
bgElements.forEach(function (element) {
|
|
const bg = element.getAttribute('data-setbg');
|
|
if (bg) {
|
|
element.style.backgroundImage = `url(${bg})`;
|
|
}
|
|
});
|
|
});
|
|
|
|
// Fonction du menu de défilement
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const dots = document.querySelectorAll('.dot');
|
|
const sections = document.querySelectorAll('section');
|
|
|
|
// Fonction pour le défilement fluide
|
|
function scrollToSection(sectionId) {
|
|
const section = document.querySelector(sectionId);
|
|
section.scrollIntoView({ behavior: 'smooth' });
|
|
}
|
|
|
|
// Ajouter l'événement de clic sur chaque rond
|
|
dots.forEach((dot) => {
|
|
dot.addEventListener('click', function (event) {
|
|
event.preventDefault();
|
|
scrollToSection(dot.getAttribute('href'));
|
|
|
|
// Mise à jour de l'état actif des ronds
|
|
dots.forEach(d => d.classList.remove('active'));
|
|
dot.classList.add('active');
|
|
});
|
|
});
|
|
|
|
// Détection automatique pour activer le rond correspondant lors du scroll
|
|
window.addEventListener('scroll', function () {
|
|
let currentSection = '';
|
|
|
|
sections.forEach(section => {
|
|
const sectionTop = section.offsetTop;
|
|
const sectionHeight = section.clientHeight;
|
|
|
|
if (window.pageYOffset >= sectionTop - sectionHeight / 3) {
|
|
currentSection = section.getAttribute('id');
|
|
}
|
|
});
|
|
|
|
dots.forEach(dot => {
|
|
dot.classList.remove('active');
|
|
if (dot.getAttribute('href') === `#${currentSection}`) {
|
|
dot.classList.add('active');
|
|
}
|
|
});
|
|
});
|
|
});
|