[alt+tab] ajout d'un menu de défilement

This commit is contained in:
Esenjin 2024-09-06 02:36:55 +02:00
parent 153fa26a03
commit c20ab1c4b9
3 changed files with 115 additions and 12 deletions

View File

@ -19,7 +19,7 @@
<body>
<!-- Accueil -->
<section class="hero-section">
<section class="hero-section" id="section-1">
<div class="pana-accordion" id="accordion">
<div class="pana-accordion-wrap">
<div class="pana-accordion-item set-bg" data-setbg="img/ap/dofus.jpg">
@ -35,7 +35,7 @@
<div class="pana-accordion-item set-bg" data-setbg="img/ap/gt.png">
<div class="pa-text">
<div class="pa-tag">Guardian Tales</div>
<h2><i>Cercle_des_Cendres</i></h2>
<h2><i>Cercle des Cendres</i></h2>
<div class="pa-author">
<img src="img/gm/elaina.jpg" alt="">
<h4>Elaina</h4>
@ -67,7 +67,7 @@
</section>
<!-- Nouvelle section pour les représentants de la communauté et la description -->
<section class="community-section">
<section class="community-section" id="section-2">
<div class="community-left">
<div class="representative">
<h2>Les gestionnaires d'« Alt Tab »</h2>
@ -113,6 +113,7 @@
<li><b>Final Fantasy XIV</b></li>
<li><b>ArcheAge</b></li>
<li><b>Black Desert Online</b></li>
<li><b>TERA</b></li>
<li><b>The Elder Scrolls Online</b></li>
<li><b>Destiny 2</b></li>
<li><b>Lost Ark</b></li>
@ -148,6 +149,15 @@
</div>
</section>
<section class="third-section" id="section-3">
<!-- Contenu de la section 3 -->
</section>
<div class="pagination-dots">
<a href="#section-1" class="dot active" data-title="Accueil"></a>
<a href="#section-2" class="dot" data-title="Présentation"></a>
<a href="#section-3" class="dot" data-title="Contact"></a>
</div>
<script type="text/javascript" src="scripts.js"></script>

View File

@ -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})`;
}
});
});
});
// 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');
}
});
});
});

View File

@ -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 {