[alt+tab] ajout d'un menu de défilement
This commit is contained in:
parent
153fa26a03
commit
c20ab1c4b9
@ -19,7 +19,7 @@
|
|||||||
<body>
|
<body>
|
||||||
|
|
||||||
<!-- Accueil -->
|
<!-- Accueil -->
|
||||||
<section class="hero-section">
|
<section class="hero-section" id="section-1">
|
||||||
<div class="pana-accordion" id="accordion">
|
<div class="pana-accordion" id="accordion">
|
||||||
<div class="pana-accordion-wrap">
|
<div class="pana-accordion-wrap">
|
||||||
<div class="pana-accordion-item set-bg" data-setbg="img/ap/dofus.jpg">
|
<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="pana-accordion-item set-bg" data-setbg="img/ap/gt.png">
|
||||||
<div class="pa-text">
|
<div class="pa-text">
|
||||||
<div class="pa-tag">Guardian Tales</div>
|
<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">
|
<div class="pa-author">
|
||||||
<img src="img/gm/elaina.jpg" alt="">
|
<img src="img/gm/elaina.jpg" alt="">
|
||||||
<h4>Elaina</h4>
|
<h4>Elaina</h4>
|
||||||
@ -67,7 +67,7 @@
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Nouvelle section pour les représentants de la communauté et la description -->
|
<!-- 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="community-left">
|
||||||
<div class="representative">
|
<div class="representative">
|
||||||
<h2>Les gestionnaires d'« Alt Tab »</h2>
|
<h2>Les gestionnaires d'« Alt Tab »</h2>
|
||||||
@ -113,6 +113,7 @@
|
|||||||
<li><b>Final Fantasy XIV</b></li>
|
<li><b>Final Fantasy XIV</b></li>
|
||||||
<li><b>ArcheAge</b></li>
|
<li><b>ArcheAge</b></li>
|
||||||
<li><b>Black Desert Online</b></li>
|
<li><b>Black Desert Online</b></li>
|
||||||
|
<li><b>TERA</b></li>
|
||||||
<li><b>The Elder Scrolls Online</b></li>
|
<li><b>The Elder Scrolls Online</b></li>
|
||||||
<li><b>Destiny 2</b></li>
|
<li><b>Destiny 2</b></li>
|
||||||
<li><b>Lost Ark</b></li>
|
<li><b>Lost Ark</b></li>
|
||||||
@ -148,6 +149,15 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</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>
|
<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 () {
|
document.addEventListener("DOMContentLoaded", function () {
|
||||||
const bgElements = document.querySelectorAll('.set-bg');
|
const bgElements = document.querySelectorAll('.set-bg');
|
||||||
bgElements.forEach(function (element) {
|
bgElements.forEach(function (element) {
|
||||||
@ -6,4 +7,49 @@
|
|||||||
element.style.backgroundImage = `url(${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');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|||||||
@ -15,6 +15,61 @@ a {
|
|||||||
background-color: transparent;
|
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 Styles */
|
||||||
.hero-section {
|
.hero-section {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -24,7 +79,6 @@ a {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
background-color: #f4f4f4;
|
background-color: #f4f4f4;
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.pana-accordion {
|
.pana-accordion {
|
||||||
@ -47,7 +101,6 @@ a {
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.pana-accordion-item:hover {
|
.pana-accordion-item:hover {
|
||||||
@ -239,12 +292,6 @@ a {
|
|||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Ajout d'un espace de défilement pour la partie droite */
|
|
||||||
.community-right {
|
|
||||||
height: 100%;
|
|
||||||
overflow-y: scroll;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Responsive adjustments */
|
/* Responsive adjustments */
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.community-section {
|
.community-section {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user