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

report
All checks were successful
Deploy / Deploy to Production (push) Successful in 5m16s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-02-07 18:09:13 +01:00
parent 563e9b9fd4
commit cce1ee0596
7 changed files with 86 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

113
assets/js/report.js
View file

@ -39,58 +39,82 @@ function initHorizontalScroll(){
const sections = document.querySelectorAll('.subsection-w-hscroll');
sections.forEach(function (section) {
const wrapper = section.querySelector('.horizontal-scroll-wrapper');
const container = section.querySelector('.horizontal-scroll');
if (!container) return;
const wrapper = container.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`;
// Calculer la distance totale à scroller horizontalement
function calculateScrollDistance() {
const totalSlidesWidth = Array.from(slides).reduce((acc, slide) => acc + slide.offsetWidth, 0);
const endMargin = window.innerWidth * 0.3; // 30vw de marge à la fin
return totalSlidesWidth - window.innerWidth + endMargin;
}
let scrollDistance = calculateScrollDistance();
// Créer un spacer invisible qui crée l'espace de scroll
// Hauteur = scrollDistance + hauteur du viewport pour maintenir le texte en dessous
const spacer = document.createElement('div');
spacer.className = 'horizontal-scroll-spacer';
spacer.style.height = `${scrollDistance + window.innerHeight}px`;
spacer.style.width = '100%';
spacer.style.pointerEvents = 'none';
// Insérer le spacer AVANT .horizontal-scroll
section.insertBefore(spacer, container);
// Calculer la position absolue du spacer une seule fois
function getSpacerTopPosition() {
let element = spacer;
let top = 0;
while (element) {
top += element.offsetTop;
element = element.offsetParent;
}
return top;
}
let spacerTopPosition = getSpacerTopPosition();
// Fonction de mise à jour du scroll horizontal
function updateHorizontalScroll() {
const rect = section.getBoundingClientRect();
const stickyContainer = section.querySelector('.horizontal-scroll');
const scrollY = window.pageYOffset || document.documentElement.scrollTop;
// 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));
// Début et fin du scroll basé sur le spacer
const scrollStart = spacerTopPosition;
const scrollEnd = spacerTopPosition + scrollDistance;
console.log('scrollY:', scrollY, 'scrollStart:', scrollStart, 'scrollEnd:', scrollEnd);
if (scrollY >= scrollStart && scrollY <= scrollEnd) {
// Phase de scroll horizontal : fixer le container
const progress = (scrollY - scrollStart) / scrollDistance;
const translateX = progress * scrollDistance;
console.log('Horizontal scroll active - progress:', 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
container.style.position = 'fixed';
container.style.top = '0';
container.style.left = '0';
} else if (scrollY < scrollStart) {
// Avant le spacer : reset
console.log('Before spacer');
wrapper.style.transform = 'translateX(0)';
if (stickyContainer) {
stickyContainer.style.position = 'relative';
}
container.style.position = '';
container.style.top = '';
container.style.left = '';
} 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';
}
// Après le spacer : garder le translate final et défixer
console.log('After spacer');
wrapper.style.transform = `translateX(-${scrollDistance}px)`;
container.style.position = '';
container.style.top = '';
container.style.left = '';
}
}
@ -99,11 +123,10 @@ function initHorizontalScroll(){
// 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`;
scrollDistance = calculateScrollDistance();
spacer.style.height = `${scrollDistance + window.innerHeight}px`;
spacerTopPosition = getSpacerTopPosition();
updateHorizontalScroll();
});
// Initial call