From c20ab1c4b9179720c4e1f2543f44527556e68b24 Mon Sep 17 00:00:00 2001 From: Esenjin Date: Fri, 6 Sep 2024 02:36:55 +0200 Subject: [PATCH] =?UTF-8?q?[alt+tab]=20ajout=20d'un=20menu=20de=20d=C3=A9f?= =?UTF-8?q?ilement?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- branches/alt+tab/index.html | 16 ++++++++-- branches/alt+tab/scripts.js | 48 +++++++++++++++++++++++++++- branches/alt+tab/style.css | 63 ++++++++++++++++++++++++++++++++----- 3 files changed, 115 insertions(+), 12 deletions(-) diff --git a/branches/alt+tab/index.html b/branches/alt+tab/index.html index d1cc29e..11859fa 100644 --- a/branches/alt+tab/index.html +++ b/branches/alt+tab/index.html @@ -19,7 +19,7 @@ -
+
@@ -35,7 +35,7 @@
Guardian Tales
-

Cercle_des_Cendres

+

Cercle des Cendres

Elaina

@@ -67,7 +67,7 @@
-
+

Les gestionnaires d'« Alt Tab »

@@ -113,6 +113,7 @@
  • Final Fantasy XIV
  • ArcheAge
  • Black Desert Online
    • +
  • TERA
  • The Elder Scrolls Online
  • Destiny 2
  • Lost Ark
    • @@ -148,6 +149,15 @@
    +
    + +
    + +
    + + + +
    diff --git a/branches/alt+tab/scripts.js b/branches/alt+tab/scripts.js index e622e78..002d817 100644 --- a/branches/alt+tab/scripts.js +++ b/branches/alt+tab/scripts.js @@ -1,3 +1,4 @@ +// Fonction pour les images de fond en section 1 document.addEventListener("DOMContentLoaded", function () { const bgElements = document.querySelectorAll('.set-bg'); bgElements.forEach(function (element) { @@ -6,4 +7,49 @@ element.style.backgroundImage = `url(${bg})`; } }); - }); \ No newline at end of file + }); + +// 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'); + } + }); + }); +}); diff --git a/branches/alt+tab/style.css b/branches/alt+tab/style.css index c841578..e305d15 100644 --- a/branches/alt+tab/style.css +++ b/branches/alt+tab/style.css @@ -15,6 +15,61 @@ a { background-color: transparent; } +/* Conteneur pour les petits ronds (pagination dots) */ +.pagination-dots { + position: fixed; + top: 50%; + right: 20px; + transform: translateY(-50%); + display: flex; + flex-direction: column; + gap: 10px; + z-index: 1000; +} + +.dot { + width: 12px; + height: 12px; + background-color: #ccc; + border-radius: 50%; + border: 2px solid #ccc; + cursor: pointer; + transition: background-color 0.3s; +} + +.dot.active { + background-color: #2682C4; + border: 2px solid #ccc; +} + +.dot:hover { + background-color: #2682C4; + border: 2px solid #ccc; +} + +/* Tooltip au survol */ +.dot::after { + content: attr(data-title); + position: absolute; + left: -100px; + transform: translateY(-50%); + background-color: #333; + color: white; + padding: 5px 8px; + font-size: 12px; + border-radius: 5px; + white-space: nowrap; + opacity: 0; + visibility: hidden; + transition: opacity 0.3s ease, visibility 0.3s ease; +} + +/* Affichage du tooltip au survol */ +.dot:hover::after { + opacity: 1; + visibility: visible; +} + /* Hero Section Styles */ .hero-section { width: 100%; @@ -24,7 +79,6 @@ a { align-items: center; position: relative; background-color: #f4f4f4; - overflow: hidden; } .pana-accordion { @@ -47,7 +101,6 @@ a { display: flex; justify-content: center; align-items: center; - overflow: hidden; } .pana-accordion-item:hover { @@ -239,12 +292,6 @@ a { border-radius: 2px; } -/* Ajout d'un espace de défilement pour la partie droite */ -.community-right { - height: 100%; - overflow-y: scroll; -} - /* Responsive adjustments */ @media (max-width: 768px) { .community-section {