97 lines
2.6 KiB
JavaScript
97 lines
2.6 KiB
JavaScript
/******/ (() => { // webpackBootstrap
|
|
/*!*********************!*\
|
|
!*** ./src/view.js ***!
|
|
\*********************/
|
|
const cards = gsap.utils.toArray(".scroll-story-block .narrative-card");
|
|
|
|
// Ajouter des classes alternées pour le styling
|
|
cards.forEach((card, index) => {
|
|
if (index % 2 === 0) {
|
|
card.classList.add("narrative-card--even");
|
|
} else {
|
|
card.classList.add("narrative-card--odd");
|
|
}
|
|
});
|
|
|
|
// Définir le breakpoint pour mobile/desktop (vous pouvez l'ajuster selon vos besoins)
|
|
const MOBILE_BREAKPOINT = 768;
|
|
let scrollTriggers = [];
|
|
let stickDistance = 0;
|
|
|
|
// Fonction pour initialiser les ScrollTriggers (desktop)
|
|
function initScrollTriggers() {
|
|
// Nettoyer d'abord les ScrollTriggers existants
|
|
killScrollTriggers();
|
|
if (cards.length === 0) return;
|
|
let firstCardST = ScrollTrigger.create({
|
|
trigger: cards[0],
|
|
start: "top 10%"
|
|
});
|
|
scrollTriggers.push(firstCardST);
|
|
let lastCardST = ScrollTrigger.create({
|
|
trigger: cards[cards.length - 1],
|
|
start: "top 10%"
|
|
});
|
|
scrollTriggers.push(lastCardST);
|
|
cards.forEach((card, index) => {
|
|
var scale = 1 - (cards.length - index) * 0.025;
|
|
let scaleDown = gsap.to(card, {
|
|
scale: scale,
|
|
"transform-origin": '"50% ' + (lastCardST.start + stickDistance) + '"'
|
|
});
|
|
let cardST = ScrollTrigger.create({
|
|
trigger: card,
|
|
start: "top 10%",
|
|
end: () => lastCardST.start + stickDistance,
|
|
pin: true,
|
|
// markers: true,
|
|
pinSpacing: false,
|
|
ease: "none",
|
|
animation: scaleDown,
|
|
toggleActions: "restart none none reverse"
|
|
});
|
|
scrollTriggers.push(cardST);
|
|
});
|
|
}
|
|
|
|
// Fonction pour détruire tous les ScrollTriggers
|
|
function killScrollTriggers() {
|
|
scrollTriggers.forEach(st => st.kill());
|
|
scrollTriggers = [];
|
|
|
|
// Réinitialiser les styles inline des cartes
|
|
cards.forEach(card => {
|
|
gsap.set(card, {
|
|
clearProps: "all"
|
|
});
|
|
});
|
|
}
|
|
|
|
// Fonction pour gérer le responsive
|
|
function handleResize() {
|
|
const isMobile = window.innerWidth < MOBILE_BREAKPOINT;
|
|
if (isMobile) {
|
|
// Sur mobile : détruire les ScrollTriggers
|
|
killScrollTriggers();
|
|
} else {
|
|
// Sur desktop : créer les ScrollTriggers s'ils n'existent pas
|
|
if (scrollTriggers.length === 0) {
|
|
initScrollTriggers();
|
|
}
|
|
}
|
|
}
|
|
|
|
// Initialisation au chargement
|
|
handleResize();
|
|
|
|
// Écouter les événements de resize avec debounce pour optimiser les performances
|
|
let resizeTimer;
|
|
window.addEventListener("resize", () => {
|
|
clearTimeout(resizeTimer);
|
|
resizeTimer = setTimeout(() => {
|
|
handleResize();
|
|
}, 250);
|
|
});
|
|
/******/ })()
|
|
;
|
|
//# sourceMappingURL=view.js.map
|