[alt+tab] ajout d'un menu de défilement
This commit is contained in:
parent
153fa26a03
commit
c20ab1c4b9
@ -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>
|
||||
|
||||
|
||||
@ -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');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user