studio-variable/index-main
3
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

horizontal scroll
All checks were successful
Deploy / Deploy to Production (push) Successful in 13s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-02-06 17:07:18 +01:00
parent 65ffae5071
commit debbefb623
5 changed files with 188 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

50
assets/css/style.css
View file

@ -3070,14 +3070,7 @@ main .page__header .description-medium {
margin-bottom: calc(var(--spacing) * 4);
position: relative;
}
.report__content .subsection-txt {
min-height: calc(100vh - var(--header-h));
max-width: var(--max-w-content);
padding-left: var(--padding-inner);
padding-right: var(--padding-inner);
padding-bottom: calc(var(--spacing) * 6);
}
.report__content .media {
.report__content .subsection-w-media .media {
margin-inline: auto;
max-width: var(--max-w-content);
padding-left: var(--padding-inner);
@ -3086,6 +3079,47 @@ main .page__header .description-medium {
top: calc(var(--header-h) + var(--spacing));
align-self: start;
}
.report__content .subsection-txt {
min-height: calc(100vh - var(--header-h));
max-width: var(--max-w-content);
padding-left: var(--padding-inner);
padding-right: var(--padding-inner);
padding-bottom: calc(var(--spacing) * 6);
}
.report__content .subsection-w-hscroll {
position: relative;
margin-bottom: calc(var(--spacing) * 4);
}
.report__content .subsection-w-hscroll .horizontal-scroll {
height: 100vh;
width: 100vw;
overflow: hidden;
display: flex;
align-items: center;
}
.report__content .subsection-w-hscroll .horizontal-scroll-wrapper {
display: flex;
flex-wrap: nowrap;
will-change: transform;
}
.report__content .subsection-w-hscroll .horizontal-scroll-slide {
flex-shrink: 0;
width: 90vw;
max-width: 700px;
padding: 0 calc(var(--spacing) * 1);
}
.report__content .subsection-w-hscroll .horizontal-scroll-slide figure, .report__content .subsection-w-hscroll .horizontal-scroll-slide img {
width: 100%;
}
.report__content .subsection-w-hscroll .horizontal-scroll-pagination {
position: fixed;
bottom: calc(var(--spacing) * 2);
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 10;
}
.report__content p {
margin: calc(var(--spacing) * 0.5) 0;
}

2
assets/css/style.css.map
View file

File diff suppressed because one or more lines are too long

59
assets/css/template/_report.scss
View file

@ -271,6 +271,18 @@
gap: var(--padding-body);
margin-bottom: calc(var(--spacing)*4);
position: relative;
.media{
margin-inline: auto;
max-width: var(--max-w-content);
padding-left: var(--padding-inner);
padding-right: var(--padding-inner);
position: sticky;
top: calc(var(--header-h) + var(--spacing));
align-self: start;
}
}
@ -282,14 +294,45 @@
padding-bottom: calc(var(--spacing)*6);
}
.media{
margin-inline: auto;
max-width: var(--max-w-content);
padding-left: var(--padding-inner);
padding-right: var(--padding-inner);
position: sticky;
top: calc(var(--header-h) + var(--spacing));
align-self: start;
.subsection-w-hscroll{
position: relative;
margin-bottom: calc(var(--spacing)*4);
.horizontal-scroll{
height: 100vh;
width: 100vw;
overflow: hidden;
display: flex;
align-items: center;
}
.horizontal-scroll-wrapper{
display: flex;
flex-wrap: nowrap;
will-change: transform;
}
.horizontal-scroll-slide{
flex-shrink: 0;
width: 90vw;
max-width: 700px;
padding: 0 calc(var(--spacing) * 1);
figure, img{
width: 100%;
}
}
.horizontal-scroll-pagination{
position: fixed;
bottom: calc(var(--spacing) * 2);
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 10;
}
}

79
assets/js/report.js
View file

@ -7,6 +7,8 @@ export function report(responsiveSmall) {
// Initialiser tous les sliders de type before-after
initSliderBeforeAfter();
initHorizontalScroll();
// Ne fonctionne que pour les écrans plus grands que responsiveSmall
if (window.matchMedia(responsiveSmall).matches) {
// Sur mobile : initialiser les swipers normalement car initMediaDisplay ne sera pas actif
@ -31,3 +33,80 @@ function initSliderBeforeAfter(container = document){
}
});
}
function initHorizontalScroll(){
const sections = document.querySelectorAll('.subsection-w-hscroll');
sections.forEach(function (section) {
const wrapper = section.querySelector('.horizontal-scroll-wrapper');
if (!wrapper) return;
// Calculer la largeur totale du contenu horizontal
const slides = wrapper.querySelectorAll('.horizontal-scroll-slide');
const totalSlidesWidth = Array.from(slides).reduce((acc, slide) => acc + slide.offsetWidth, 0);
const endMargin = window.innerWidth * 0.3; // 30vw de marge à la fin
const scrollableWidth = totalSlidesWidth - window.innerWidth + endMargin;
// Définir la hauteur de la section pour créer l'espace de scroll virtuel
// La hauteur = viewport + largeur scrollable (pour un ratio 1:1 entre scroll Y et X)
const sectionHeight = window.innerHeight + scrollableWidth;
section.style.height = `${sectionHeight}px`;
// Fonction de mise à jour du scroll horizontal
function updateHorizontalScroll() {
const rect = section.getBoundingClientRect();
const stickyContainer = section.querySelector('.horizontal-scroll');
// Quand le haut de la section atteint le haut du viewport
if (rect.top <= 0 && rect.bottom >= window.innerHeight) {
// Calculer la progression (0 à 1)
const progress = Math.abs(rect.top) / scrollableWidth;
const clampedProgress = Math.max(0, Math.min(1, progress));
// Appliquer le scroll horizontal
const translateX = clampedProgress * scrollableWidth;
wrapper.style.transform = `translateX(-${translateX}px)`;
// Fixer le conteneur
if (stickyContainer) {
stickyContainer.style.position = 'fixed';
stickyContainer.style.top = '0';
stickyContainer.style.left = '0';
stickyContainer.style.width = '100vw';
}
} else if (rect.top > 0) {
// Avant la section : reset
wrapper.style.transform = 'translateX(0)';
if (stickyContainer) {
stickyContainer.style.position = 'relative';
}
} else {
// Après la section : garder à la fin
wrapper.style.transform = `translateX(-${scrollableWidth}px)`;
if (stickyContainer) {
stickyContainer.style.position = 'absolute';
stickyContainer.style.top = 'auto';
stickyContainer.style.bottom = '0';
stickyContainer.style.left = '0';
stickyContainer.style.width = '100vw';
}
}
}
// Écouter le scroll
window.addEventListener('scroll', updateHorizontalScroll, { passive: true });
// Recalculer au resize
window.addEventListener('resize', function() {
const newTotalWidth = Array.from(slides).reduce((acc, slide) => acc + slide.offsetWidth, 0);
const newEndMargin = window.innerWidth * 0.3;
const newScrollableWidth = newTotalWidth - window.innerWidth + newEndMargin;
const newSectionHeight = window.innerHeight + newScrollableWidth;
section.style.height = `${newSectionHeight}px`;
});
// Initial call
updateHorizontalScroll();
});
}

30
site/templates/report.php
View file

@ -463,44 +463,44 @@
<h3 class="section-title"> 3. MODÉLISATION DÉTAILLÉE DES IMPACTS DE TIRS SUR LE VÉHICULE</h3>
<div class="subsection-w-media">
<div class="subsection-w-hscroll">
<div class="media">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="swiper-slide__inner">
<div class="horizontal-scroll">
<div class="horizontal-scroll-wrapper">
<div class="horizontal-scroll-slide">
<div class="horizontal-scroll-slide__inner">
<figure><img src="/assets/images/adam-raihane/fig-4.png"></figure>
<p class="caption">Fig. 4 : Vue frontale du véhicule et localisation des impacts de tirs sur le pare-brise (Reconstitution 3D / Photo originale).</p>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-slide__inner">
<div class="horizontal-scroll-slide">
<div class="horizontal-scroll-slide__inner">
<figure><img src="/assets/images/adam-raihane/fig-5.png"></figure>
<p class="caption">Fig. 5 : Vue latérale du véhicule et localisation des impacts de tirs sur les flanc gauche (Reconstitution 3D / Photo originale).</p>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-slide__inner">
<div class="horizontal-scroll-slide">
<div class="horizontal-scroll-slide__inner">
<figure><img src="/assets/images/adam-raihane/fig-6.png"></figure>
<p class="caption">Fig. 6 : Vue latérale du véhicule et localisation des impacts de tirs sur les flanc droit (Reconstitution 3D / Photo originale).</p>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-slide__inner">
<div class="horizontal-scroll-slide">
<div class="horizontal-scroll-slide__inner">
<figure><img src="/assets/images/adam-raihane/fig-7.png"></figure>
<p class="caption">Fig. 7 : Vue d’ensemble du modèle 3D du véhicule avec tous les impacts de tirs localisés.</p>
</div>
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-pagination"></div>
<div class="horizontal-scroll-button-prev"></div>
<div class="horizontal-scroll-button-next"></div>
<div class="horizontal-scroll-pagination"></div>
</div> <!-- swiper -->
</div> <!-- horizontal-scroll -->
</div>