bachir/drupal-mathallo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

prev-next chapitre. read more arrow

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2026-02-19 16:41:43 +01:00
parent ca2a70f1b8
commit c821e49519
9 changed files with 308 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
web_main/themes/custom/mathallo/assets/js/main.js
View File

@@ -98,14 +98,14 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
// console.log('container', container);
// listes all available sizes
let min = 150;
let increment = Math.round((350 / (formesclasses.length -1)));
for (let i = 0; i < formesclasses.length; i++) {
sizes.push( min + increment * i)
}
// let min = 150;
// let increment = Math.round((350 / (formesclasses.length -1)));
// for (let i = 0; i < formesclasses.length; i++) {
// sizes.push( min + increment * i)
// }
// console.log('sizes', sizes);
let cards = document.querySelectorAll('.field-card, .node-type-chapitre, .node-type-partie');
let cards = document.querySelectorAll('article[role="home-presentation"], .field-card, .node-type-chapitre, .node-type-partie');
// console.log('cards', cards);
let used_n = [];
let oddeven=1;
@@ -152,6 +152,7 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
// },
}
})
// cards opacity
.from(card.children, {
opacity: 0.4,
}, 0)
@@ -161,6 +162,7 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
.to(card.children, {
opacity: 0.4,
}, 0.7)
// cards mvmt
.from(card, {
translateX: `${200 * oddeven}px`,
translateY: `${100 * oddeven}px`
@@ -173,8 +175,6 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
// translateX: `${200 * oddeven}px`,
// }, 0.9);
// inverse oddeven
oddeven*=-1;
// Animation des formes continue de rotation + skew pendant tout le scroll
gsap.to(forme.querySelector('svg'), {
@@ -185,14 +185,14 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
scrub: true,
ease: "power4.out"
},
rotation: 45,
skewX: 10
rotation: Math.random() > 0.5 ? 45 : -45,
skewX: Math.random() > 0.5 ? 10 : -10
});
// Animation de couleur des formes uniquement au centre de l'écran
gsap.timeline({
scrollTrigger: {
trigger: forme,
trigger: card,
start: "top center", // Commence quand le haut de l'élément atteint le centre
end: "bottom center", // Termine quand le bas de l'élément passe le centre
scrub: true,
@@ -202,13 +202,14 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
.to(forme.querySelector('svg'), {
stroke: "#f661e2", // Passage au rose
duration: 0.1
}, 0.4) // Au milieu de la timeline (centre de l'écran)
}, 0.3) // Au milieu de la timeline (centre de l'écran)
.to(forme.querySelector('svg'), {
stroke: "#1642bc", // Retour au bleu
duration: 0.1
}, 0.6); // Juste après le centre
}, 0.7); // Juste après le centre
// inverse oddeven
oddeven*=-1;
}
}
@@ -228,9 +229,10 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
const svgNode = forme.querySelector('svg');
// random size
// let wh = 150 + Math.random()*350;
let wh = 200 + Math.random()*300;
// OR
// pic a size
let wh = sizes.splice(Math.floor(Math.random() * sizes.length), 1)[0];
// let wh = sizes.splice(Math.floor(Math.random() * sizes.length), 1)[0];
// record the original scale for stroke width rescalling
const init_wh = svgNode.getAttribute('width');
// set the new size
@@ -238,35 +240,42 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
svgNode.setAttribute('width', wh);
svgNode.setAttribute('height', wh);
// keep stroke width to visualy 1px
let scale = wh / init_wh;
const paths = svgNode.querySelectorAll('path, line, rect, circle, ellipse, polygon, polyline');
// console.log('paths', paths);
paths.forEach(path => {
const init_SW = parseFloat(path.getAttribute('stroke-width')) || 1;
let new_SW = init_SW / scale;
path.setAttribute('stroke-width', `${new_SW}px`);
path.style.strokeWidth = `${new_SW}px`;
});
// // keep stroke width to visualy 1px
// let scale = wh / init_wh;
// const paths = svgNode.querySelectorAll('path, line, rect, circle, ellipse, polygon, polyline');
// // console.log('paths', paths);
// paths.forEach(path => {
// const init_SW = parseFloat(path.getAttribute('stroke-width')) || 1;
// let new_SW = init_SW / scale;
// path.setAttribute('stroke-width', `${new_SW}px`);
// path.style.strokeWidth = `${new_SW}px`;
// });
// random position
// top
let top = card.offsetTop + card.clientHeight/2 - wh/2;
if (card.clientHeight < 300) {
top = Math.random() > 0.5
? card.offsetTop - wh/2 // on top
: card.offsetTop + card.clientHeight - wh/2; // on bottom
}
forme.style.top = `${top}px`;
let randoffset = 20 + Math.random() * 20;
// left right
if (card.classList.contains('field-principes-reflexion')) {
// left
forme.style.left = `${card.offsetLeft - wh}px`;
forme.style.left = `${card.offsetLeft - wh + randoffset}px`;
} else if(card.classList.contains('field-en-pratique')) {
// right
forme.style.left = `${card.offsetLeft + card.clientWidth}px`;
forme.style.left = `${card.offsetLeft + card.clientWidth - randoffset}px`;
} else {
// random
forme.style.left = Math.random() > 0.5 ? `${card.offsetLeft - wh}px` : `${card.offsetLeft + card.clientWidth}px`;
forme.style.left = Math.random() > 0.5
? `${card.offsetLeft - wh + randoffset}px`
: `${card.offsetLeft + card.clientWidth - randoffset}px`;
}
return forme;
}