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

starting to have quite good animations with gsap

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2026-02-18 12:21:24 +01:00
parent 42c93da1cb
commit 8f9cdb36d4
16 changed files with 231 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web_main/themes/custom/mathallo/assets/dist/main.css vendored
View File

File diff suppressed because one or more lines are too long

20
web_main/themes/custom/mathallo/assets/dist/main.js vendored
View File

File diff suppressed because one or more lines are too long

15
web_main/themes/custom/mathallo/assets/img/formes/cone.svg
View File

@@ -5,6 +5,7 @@
id="screenshot-d8ccbdb6-0d67-80f5-8007-0f3b2221a5a2"
viewBox="-35.954 -35.954 300.00001 300.00001"
fill="none"
stroke="#1642bc"
version="1.1"
sodipodi:docname="cone.svg"
inkscape:version="1.4.3 (0d15f75042, 2025-12-25)"
@@ -42,35 +43,35 @@
id="shape-d8ccbdb6-0d67-80f5-8007-0f3b2221a5a3"
rx="0"
ry="0"
style="stroke-width:0.634745;fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-opacity:1;stroke-dasharray:3.80847001,3.80847001;stroke-dashoffset:0">
style="stroke-width:0.634745;fill:#ffffff;fill-opacity:1;stroke-opacity:1;stroke-dasharray:3.80847001,3.80847001;stroke-dashoffset:0">
<g
id="shape-d8ccbdb6-0d67-80f5-8007-0f3b2221a5a5"
style="stroke-width:0.634745;fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-opacity:1;stroke-dasharray:3.80847001,3.80847001;stroke-dashoffset:0">
style="stroke-width:0.634745;fill:#ffffff;fill-opacity:1;stroke-opacity:1;stroke-dasharray:3.80847001,3.80847001;stroke-dashoffset:0">
<g
class="fills"
id="fills-d8ccbdb6-0d67-80f5-8007-0f3b2221a5a5"
style="stroke-width:0.634745;fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-opacity:1;stroke-dasharray:3.80847001,3.80847001;stroke-dashoffset:0">
style="stroke-width:0.634745;fill:#ffffff;fill-opacity:1;stroke-opacity:1;stroke-dasharray:3.80847001,3.80847001;stroke-dashoffset:0">
<path
d="M 52.102974,175.05916 67.465645,9.5801487 199.89497,109.98786"
style="fill:#ffffff;fill-opacity:1;stroke-width:0.634745;stroke:#1642bc;stroke-opacity:1;stroke-dasharray:3.80847001,3.80847001;stroke-dashoffset:0"
style="fill:#ffffff;fill-opacity:1;stroke-width:0.634745;stroke-opacity:1;stroke-dasharray:3.80847001,3.80847001;stroke-dashoffset:0"
id="path1" />
</g>
</g>
</g>
<g
id="shape-d8ccbdb6-0d67-80f5-8007-0f3b2221a5a4"
style="stroke-width:0.634745;fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-opacity:1;stroke-dasharray:3.80847001,3.80847001;stroke-dashoffset:0">
style="stroke-width:0.634745;fill:#ffffff;fill-opacity:1;stroke-opacity:1;stroke-dasharray:3.80847001,3.80847001;stroke-dashoffset:0">
<g
class="fills"
id="fills-d8ccbdb6-0d67-80f5-8007-0f3b2221a5a4"
style="stroke-width:0.634745;fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-opacity:1;stroke-dasharray:3.80847001,3.80847001;stroke-dashoffset:0">
style="stroke-width:0.634745;fill:#ffffff;fill-opacity:1;stroke-opacity:1;stroke-dasharray:3.80847001,3.80847001;stroke-dashoffset:0">
<ellipse
cx="127.12667"
cy="143.76231"
rx="80.485847"
ry="30.115566"
transform="rotate(-23.763291,127.12683,143.76245)"
style="fill:#ffffff;fill-opacity:1;stroke-width:0.634745;stroke:#1642bc;stroke-opacity:1;stroke-dasharray:3.80847001,3.80847001;stroke-dashoffset:0"
style="fill:#ffffff;fill-opacity:1;stroke-width:0.634745;stroke-opacity:1;stroke-dasharray:3.80847001,3.80847001;stroke-dashoffset:0"
id="ellipse2" />
</g>
</g>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

5
web_main/themes/custom/mathallo/assets/img/formes/croissant.svg
View File

@@ -5,6 +5,7 @@
id="screenshot-d8ccbdb6-0d67-80f5-8007-0f4cd3df90e2"
viewBox="4465 2506 300 300"
fill="none"
stroke="#1642bc"
version="1.1"
sodipodi:docname="croissant.svg"
inkscape:version="1.4.3 (0d15f75042, 2025-12-25)"
@@ -38,10 +39,10 @@
class="fills"
id="fills-d8ccbdb6-0d67-80f5-8007-0f4cd3df90e2"
transform="matrix(1.2067065,0,0,1.2067065,-964.42483,-478.75662)"
style="fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-width:0.828702;stroke-dasharray:4.97222, 4.97222;stroke-dashoffset:0;stroke-opacity:1">
style="fill:#ffffff;fill-opacity:1;stroke-width:0.828702;stroke-dasharray:4.97222, 4.97222;stroke-dashoffset:0;stroke-opacity:1">
<path
d="m 4571.9961,2675.9731 c -59.0527,-34.041 -79.2334,-109.8383 -45.0381,-169.1591 0.626,-1.085 214.6172,122.271 213.9912,123.3564 -34.1953,59.3203 -109.9009,79.8442 -168.9531,45.8027"
style="fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-width:0.828702;stroke-dasharray:4.97222, 4.97222;stroke-dashoffset:0;stroke-opacity:1"
style="fill:#ffffff;fill-opacity:1;stroke-width:0.828702;stroke-dasharray:4.97222, 4.97222;stroke-dashoffset:0;stroke-opacity:1"
id="path1" />
</g>
</g>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

17
web_main/themes/custom/mathallo/assets/img/formes/cube.svg
View File

@@ -4,6 +4,7 @@
height="300"
id="screenshot-52808c91-ee87-8059-8007-0f133be4024b"
viewBox="-22.648 -22.505 300.00001 299.99999"
stroke="#1642bc"
fill="none"
version="1.1"
sodipodi:docname="cube.svg"
@@ -35,37 +36,37 @@
<g
class="fills"
id="fills-52808c91-ee87-8059-8007-0f133be402cf"
style="stroke-width:1.44726;fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-opacity:1;stroke-dasharray:8.68356014,8.68356014;stroke-dashoffset:0"
style="stroke-width:1.44726;fill:#ffffff;fill-opacity:1;stroke-opacity:1;stroke-dasharray:8.68356014,8.68356014;stroke-dashoffset:0"
transform="matrix(0.6909633,0,0,0.6909633,2.3937652,1.3554119)">
<path
d="M -22.647984,336.22495 13.056607,72.397263 15.813931,72.770432 170.13913,-2.9843304 382.64841,25.774946 l -32.6919,241.569324 -106.36719,100.5943 -0.57373,4.2395"
style="fill:#ffffff;fill-opacity:1;stroke-width:1.44726;stroke:#1642bc;stroke-opacity:1;stroke-dasharray:8.68356014,8.68356014;stroke-dashoffset:0"
style="fill:#ffffff;fill-opacity:1;stroke-width:1.44726;stroke-opacity:1;stroke-dasharray:8.68356014,8.68356014;stroke-dashoffset:0"
id="path1" />
</g>
<g
id="strokes-5b0d4cb0-e4c2-80ff-8007-914867142e14-52808c91-ee87-8059-8007-0f133be402d0"
class="strokes"
style="stroke-width:1.44726;fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-opacity:1;stroke-dasharray:8.68356014,8.68356014;stroke-dashoffset:0"
style="stroke-width:1.44726;fill:#ffffff;fill-opacity:1;stroke-opacity:1;stroke-dasharray:8.68356014,8.68356014;stroke-dashoffset:0"
transform="matrix(0.6909633,0,0,0.6909633,2.3937652,1.3554119)" />
<g
class="fills"
id="fills-52808c91-ee87-8059-8007-0f133be402d1"
style="stroke-width:1.44726;fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-opacity:1;stroke-dasharray:8.68356014,8.68356014;stroke-dashoffset:0"
style="stroke-width:1.44726;fill:#ffffff;fill-opacity:1;stroke-opacity:1;stroke-dasharray:8.68356014,8.68356014;stroke-dashoffset:0"
transform="matrix(0.6909633,0,0,0.6909633,2.3937652,1.3554119)" />
<g
class="fills"
id="fills-52808c91-ee87-8059-8007-0f133be402d2"
style="stroke-width:1.44726;fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-opacity:1;stroke-dasharray:8.68356014,8.68356014;stroke-dashoffset:0"
style="stroke-width:1.44726;fill:#ffffff;fill-opacity:1;stroke-opacity:1;stroke-dasharray:8.68356014,8.68356014;stroke-dashoffset:0"
transform="matrix(0.6909633,0,0,0.6909633,2.3937652,1.3554119)">
<path
d="M 276.56589,109.99174 380.49362,27.416059"
id="path4"
style="stroke-width:1.44726;fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-opacity:1;stroke-dasharray:8.68356014,8.68356014;stroke-dashoffset:0" />
style="stroke-width:1.44726;fill:#ffffff;fill-opacity:1;stroke-opacity:1;stroke-dasharray:8.68356014,8.68356014;stroke-dashoffset:0" />
</g>
<g
class="fills"
id="fills-52808c91-ee87-8059-8007-0f133be402d0"
style="stroke-width:1.44726;fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-opacity:1;stroke-dasharray:8.68356014,8.68356014;stroke-dashoffset:0"
style="stroke-width:1.44726;fill:#ffffff;fill-opacity:1;stroke-opacity:1;stroke-dasharray:8.68356014,8.68356014;stroke-dashoffset:0"
transform="matrix(0.6909633,0,0,0.6909633,2.393765,1.355412)">
<rect
rx="0"
@@ -76,6 +77,6 @@
width="268.08511"
height="266.23282"
id="rect1"
style="stroke-width:1.44726;fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-opacity:1;stroke-dasharray:8.68356014,8.68356014;stroke-dashoffset:0" />
style="stroke-width:1.44726;fill:#ffffff;fill-opacity:1;stroke-opacity:1;stroke-dasharray:8.68356014,8.68356014;stroke-dashoffset:0" />
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 3.5 KiB

21
web_main/themes/custom/mathallo/assets/img/formes/cylindre.svg
View File

@@ -5,6 +5,7 @@
id="screenshot-52808c91-ee87-8059-8007-0f133be4024a"
viewBox="42.252 -118.216 300 300"
fill="none"
stroke="#1642bc"
version="1.1"
sodipodi:docname="cyclindre.svg"
inkscape:version="1.4.3 (0d15f75042, 2025-12-25)"
@@ -38,11 +39,11 @@
style="stroke-width:1.56488">
<g
id="shape-52808c91-ee87-8059-8007-0f133be402cb"
style="fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-width:1.56488;stroke-dasharray:9.38926, 9.38926;stroke-dashoffset:0;stroke-opacity:1">
style="fill:#ffffff;fill-opacity:1;stroke-width:1.56488;stroke-dasharray:9.38926, 9.38926;stroke-dashoffset:0;stroke-opacity:1">
<g
class="fills"
id="fills-52808c91-ee87-8059-8007-0f133be402cb"
style="fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-width:1.56488;stroke-dasharray:9.38926, 9.38926;stroke-dashoffset:0;stroke-opacity:1">
style="fill:#ffffff;fill-opacity:1;stroke-width:1.56488;stroke-dasharray:9.38926, 9.38926;stroke-dashoffset:0;stroke-opacity:1">
<rect
rx="0"
ry="0"
@@ -51,45 +52,45 @@
transform="rotate(104.99999,216.34401,120.71608)"
width="280.46768"
height="244"
style="fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-width:1.56488;stroke-dasharray:9.38926, 9.38926;stroke-dashoffset:0;stroke-opacity:1"
style="fill:#ffffff;fill-opacity:1;stroke-width:1.56488;stroke-dasharray:9.38926, 9.38926;stroke-dashoffset:0;stroke-opacity:1"
id="rect1" />
</g>
</g>
<g
id="shape-52808c91-ee87-8059-8007-0f133be402cc"
style="fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-width:1.56488;stroke-dasharray:9.38926, 9.38926;stroke-dashoffset:0;stroke-opacity:1">
style="fill:#ffffff;fill-opacity:1;stroke-width:1.56488;stroke-dasharray:9.38926, 9.38926;stroke-dashoffset:0;stroke-opacity:1">
<g
class="fills"
id="fills-52808c91-ee87-8059-8007-0f133be402cc"
style="fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-width:1.56488;stroke-dasharray:9.38926, 9.38926;stroke-dashoffset:0;stroke-opacity:1">
style="fill:#ffffff;fill-opacity:1;stroke-width:1.56488;stroke-dasharray:9.38926, 9.38926;stroke-dashoffset:0;stroke-opacity:1">
<ellipse
cx="251.77914"
cy="-11.529586"
rx="77.760002"
ry="122"
transform="rotate(104.99999,251.77914,-11.529559)"
style="fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-width:1.56488;stroke-dasharray:9.38926, 9.38926;stroke-dashoffset:0;stroke-opacity:1"
style="fill:#ffffff;fill-opacity:1;stroke-width:1.56488;stroke-dasharray:9.38926, 9.38926;stroke-dashoffset:0;stroke-opacity:1"
id="ellipse2" />
</g>
<g
id="strokes-f430270b-0cf6-8015-8007-91483f8a85da-52808c91-ee87-8059-8007-0f133be402cc"
class="strokes"
style="fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-width:1.56488;stroke-dasharray:9.38926, 9.38926;stroke-dashoffset:0;stroke-opacity:1" />
style="fill:#ffffff;fill-opacity:1;stroke-width:1.56488;stroke-dasharray:9.38926, 9.38926;stroke-dashoffset:0;stroke-opacity:1" />
</g>
<g
id="shape-52808c91-ee87-8059-8007-0f133be402cd"
style="fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-width:1.56488;stroke-dasharray:9.38926, 9.38926;stroke-dashoffset:0;stroke-opacity:1">
style="fill:#ffffff;fill-opacity:1;stroke-width:1.56488;stroke-dasharray:9.38926, 9.38926;stroke-dashoffset:0;stroke-opacity:1">
<g
class="fills"
id="fills-52808c91-ee87-8059-8007-0f133be402cd"
style="fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-width:1.56488;stroke-dasharray:9.38926, 9.38926;stroke-dashoffset:0;stroke-opacity:1">
style="fill:#ffffff;fill-opacity:1;stroke-width:1.56488;stroke-dasharray:9.38926, 9.38926;stroke-dashoffset:0;stroke-opacity:1">
<ellipse
cx="180.22086"
cy="255.52959"
rx="77.760002"
ry="122"
transform="rotate(104.99999,180.22082,255.52959)"
style="fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-width:1.56488;stroke-dasharray:9.38926, 9.38926;stroke-dashoffset:0;stroke-opacity:1"
style="fill:#ffffff;fill-opacity:1;stroke-width:1.56488;stroke-dasharray:9.38926, 9.38926;stroke-dashoffset:0;stroke-opacity:1"
id="ellipse4" />
</g>
</g>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.9 KiB

After

Width:  |  Height:  |  Size: 4.8 KiB

9
web_main/themes/custom/mathallo/assets/img/formes/diamant.svg
View File

@@ -5,6 +5,7 @@
id="screenshot-d8ccbdb6-0d67-80f5-8007-0f486309a42a"
viewBox="-31.943 -18.675 300.00001 299.99999"
fill="none"
stroke="#1642bc"
version="1.1"
sodipodi:docname="diamant.svg"
inkscape:version="1.4.3 (0d15f75042, 2025-12-25)"
@@ -42,10 +43,10 @@
<g
class="fills"
id="fills-d8ccbdb6-0d67-80f5-8007-0f486309a42b"
style="fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-opacity:1">
style="fill:#ffffff;fill-opacity:1;stroke-opacity:1">
<path
d="M 194.34372,127.27941 63.900356,4.0450368 2.6562154,172.72058 133.09958,295.9552 194.34372,127.27941 v 0"
style="fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-dasharray:6, 6;stroke-dashoffset:0;stroke-opacity:1"
style="fill:#ffffff;fill-opacity:1;stroke-dasharray:6, 6;stroke-dashoffset:0;stroke-opacity:1"
id="path1" />
</g>
</g>
@@ -66,7 +67,7 @@
id="g3">
<path
d="m 64.296837,5.7176442 45.140133,123.5798458 24.4961,166.4602"
style="fill:none;stroke:#1642bc;stroke-width:1;stroke-dasharray:6, 6;stroke-dashoffset:0;stroke-opacity:1"
style="fill:none;stroke-width:1;stroke-dasharray:6, 6;stroke-dashoffset:0;stroke-opacity:1"
id="path3" />
</g>
</g>
@@ -88,7 +89,7 @@
id="g5">
<path
d="M 4.6205711,173.57971 110.0317,131.80676 l 83.57764,-3.91163"
style="fill:none;stroke:#1642bc;stroke-width:1;stroke-dasharray:6, 6;stroke-dashoffset:0;stroke-opacity:1"
style="fill:none;stroke-width:1;stroke-dasharray:6, 6;stroke-dashoffset:0;stroke-opacity:1"
id="path5" />
</g>
</g>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

7
web_main/themes/custom/mathallo/assets/img/formes/infinite.svg
View File

@@ -5,6 +5,7 @@
id="screenshot-d8ccbdb6-0d67-80f5-8007-0f3aa2a8cd91"
viewBox="1592 1007 300.00001 300.00001"
fill="none"
stroke="#1642bc"
version="1.1"
sodipodi:docname="infinite.svg"
inkscape:version="1.4.3 (0d15f75042, 2025-12-25)"
@@ -37,11 +38,11 @@
<g
class="fills"
id="fills-d8ccbdb6-0d67-80f5-8007-0f3aa2a8cd91"
style="stroke:#000000;stroke-width:0.719491;stroke-dasharray:0.719491, 0.719491;stroke-dashoffset:0;stroke-opacity:1"
style="stroke-width:0.719491;stroke-dasharray:0.719491, 0.719491;stroke-dashoffset:0;stroke-opacity:1"
transform="matrix(1.3898722,0,0,1.3898722,-634.4535,-366.08988)">
<path
d="m 1610.8833,1134.1846 c -14.7687,-33.7845 12.4991,-72.9344 52.7172,-67.5467 13.2492,1.7752 26.0938,7.1809 39.9683,13.148 0.631,0.2712 0.8173,0.1404 1.061,-0.4517 8.9624,-21.7617 21.4516,-54.4624 56.2635,-57.9922 14.6506,-1.4856 27.2158,3.304 37.1204,14.2203 33.1484,36.5354 3.0478,90.3591 -44.8957,82.4958 -12.0919,-1.9834 -23.7912,-6.7624 -37.7799,-12.8025 -0.7468,-0.3225 -0.953,-0.1489 -1.2345,0.5352 -6.5562,15.9272 -13.5647,33.1916 -26.3437,44.4524 -26.0049,22.915 -62.4844,16.6899 -76.8766,-16.0586 z m 18.6932,-8.4304 c 9.0384,19.3076 27.9006,22.3068 42.5575,12.2231 12.6669,-8.7144 19.3014,-25.7669 25.036,-40.0869 0.1934,-0.4827 -0.052,-0.5459 -0.3702,-0.6673 -11.9401,-4.5493 -24.4117,-10.9721 -37.1127,-11.7033 -24.6164,-1.4173 -38.0843,20.9685 -30.1106,40.2344 z m 159.6901,-66.3953 c -8.4126,-18.7915 -27.6301,-23.0366 -43.2124,-11.9109 -12.2604,8.7539 -18.851,25.7205 -24.4139,39.6025 -0.193,0.4815 0,0.5901 0.3802,0.7344 16.6674,6.3484 38.1795,18.3396 56.0532,7.2254 11.9058,-7.4031 16.6516,-22.4085 11.1929,-35.6514 z"
style="fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-width:0.719491;stroke-dasharray:4.31694, 4.31694;stroke-dashoffset:0;stroke-opacity:1"
style="fill:#ffffff;fill-opacity:1;stroke-width:0.719491;stroke-dasharray:4.31694, 4.31694;stroke-dashoffset:0;stroke-opacity:1"
id="path1" />
</g>
<g
@@ -60,7 +61,7 @@
<path
d="m 1610.8833,1134.1846 c -14.7687,-33.7845 12.4991,-72.9344 52.7172,-67.5467 13.2492,1.7752 26.0938,7.1809 39.9683,13.148 0.631,0.2712 0.8173,0.1404 1.061,-0.4517 8.9624,-21.7617 21.4516,-54.4624 56.2635,-57.9922 14.6506,-1.4856 27.2158,3.304 37.1204,14.2203 33.1484,36.5354 3.0478,90.3591 -44.8957,82.4958 -12.0919,-1.9834 -23.7912,-6.7624 -37.7799,-12.8025 -0.7468,-0.3225 -0.953,-0.1489 -1.2345,0.5352 -6.5562,15.9272 -13.5647,33.1916 -26.3437,44.4524 -26.0049,22.915 -62.4844,16.6899 -76.8766,-16.0586 z m 18.6932,-8.4304 c 9.0384,19.3076 27.9006,22.3068 42.5575,12.2231 12.6669,-8.7144 19.3014,-25.7669 25.036,-40.0869 0.1934,-0.4827 -0.052,-0.5459 -0.3702,-0.6673 -11.9401,-4.5493 -24.4117,-10.9721 -37.1127,-11.7033 -24.6164,-1.4173 -38.0843,20.9685 -30.1106,40.2344 z m 159.6901,-66.3953 c -8.4126,-18.7915 -27.6301,-23.0366 -43.2124,-11.9109 -12.2604,8.7539 -18.851,25.7205 -24.4139,39.6025 -0.193,0.4815 0,0.5901 0.3802,0.7344 16.6674,6.3484 38.1795,18.3396 56.0532,7.2254 11.9058,-7.4031 16.6516,-22.4085 11.1929,-35.6514 z"
id="stroke-shape-render-1-d8ccbdb6-0d67-80f5-8007-0f3aa2a8cd91-0"
style="fill:none;stroke:#1642bc;stroke-width:2;stroke-dasharray:11, 11;stroke-opacity:1" />
style="fill:none;stroke-width:2;stroke-dasharray:11, 11;stroke-opacity:1" />
</defs>
</g>
</g>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB

5
web_main/themes/custom/mathallo/assets/img/formes/pi.svg
View File

@@ -5,6 +5,7 @@
id="screenshot-d8ccbdb6-0d67-80f5-8007-0f3b08c23460"
viewBox="1220 3305 299.99999 300"
fill="none"
stroke="#1642bc"
version="1.1"
sodipodi:docname="pi.svg"
inkscape:version="1.4.3 (0d15f75042, 2025-12-25)"
@@ -37,11 +38,11 @@
<g
class="fills"
id="fills-d8ccbdb6-0d67-80f5-8007-0f3b08c23460"
style="fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-width:1.1176;stroke-dasharray:6.70558, 6.70558;stroke-dashoffset:0;stroke-opacity:1"
style="fill:#ffffff;fill-opacity:1;stroke-width:1.1176;stroke-dasharray:6.70558, 6.70558;stroke-dashoffset:0;stroke-opacity:1"
transform="matrix(0.8947766,0,0,0.8947766,127.10472,355.4647)">
<path
d="m 1397.8412,3563.5229 c -10.8759,-23.4223 -8.2047,-46.956 -2.8204,-63.1679 17.6236,-53.065 29.0848,-87.7161 36.1325,-109.0774 l -66.6282,-22.0554 -65.0722,196.5757 -37.6327,-12.5398 65.0476,-196.5015 -41.6288,-13.78 12.5759,-37.7422 225.2723,74.5703 -12.576,37.7422 -41.7519,-13.8208 -36.1391,109.2173 c 0,0 -6.5218,22.749 4.43,42.642 12.1043,21.9849 37.1178,29.5455 37.1178,29.5455 l -11.2166,34.9677 c 0,0 -7.316,-2.9477 -18.9255,-6.8037 -18.8872,-6.2729 -38.7871,-33.8413 -46.1847,-49.772"
style="fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-width:1.1176;stroke-dasharray:6.70558, 6.70558;stroke-dashoffset:0;stroke-opacity:1"
style="fill:#ffffff;fill-opacity:1;stroke-width:1.1176;stroke-dasharray:6.70558, 6.70558;stroke-dashoffset:0;stroke-opacity:1"
id="path1" />
</g>
</g>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

19
web_main/themes/custom/mathallo/assets/img/formes/prct.svg
View File

@@ -5,6 +5,7 @@
id="screenshot-d8ccbdb6-0d67-80f5-8007-0f3a77a9213a"
viewBox="0 0 300 300"
fill="none"
stroke="#1642bc"
version="1.1"
sodipodi:docname="prct.svg"
inkscape:version="1.4.3 (0d15f75042, 2025-12-25)"
@@ -39,37 +40,37 @@
transform="translate(6,10)">
<g
id="shape-d8ccbdb6-0d67-80f5-8007-0f3a77a9213b"
style="fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-opacity:1;stroke-dasharray:6, 6;stroke-dashoffset:0">
style="fill:#ffffff;fill-opacity:1;stroke-opacity:1;stroke-dasharray:6, 6;stroke-dashoffset:0">
<g
class="fills"
id="fills-d8ccbdb6-0d67-80f5-8007-0f3a77a9213b"
style="fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-opacity:1;stroke-dasharray:6, 6;stroke-dashoffset:0">
style="fill:#ffffff;fill-opacity:1;stroke-opacity:1;stroke-dasharray:6, 6;stroke-dashoffset:0">
<path
d="M 58.431641,0 C 90.68103,0 116.8634,26.207275 116.8634,58.487305 c 0,32.279907 -26.18237,58.487185 -58.431759,58.487185 C 26.182373,116.97449 0,90.767212 0,58.487305 0,26.207275 26.182373,0 58.431641,0 m 0,29.243652 c -16.124634,0 -29.215821,13.103638 -29.215821,29.243653 0,16.139892 13.091187,29.24353 29.215821,29.24353 16.124755,0 29.215942,-13.103638 29.215942,-29.24353 0,-16.140015 -13.091187,-29.243653 -29.215942,-29.243653"
style="fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-opacity:1;stroke-dasharray:6, 6;stroke-dashoffset:0"
style="fill:#ffffff;fill-opacity:1;stroke-opacity:1;stroke-dasharray:6, 6;stroke-dashoffset:0"
id="path1" />
</g>
</g>
<g
id="shape-d8ccbdb6-0d67-80f5-8007-0f3a77a9213c"
style="fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-opacity:1;stroke-dasharray:6, 6;stroke-dashoffset:0">
style="fill:#ffffff;fill-opacity:1;stroke-opacity:1;stroke-dasharray:6, 6;stroke-dashoffset:0">
<g
class="fills"
id="fills-d8ccbdb6-0d67-80f5-8007-0f3a77a9213c"
style="fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-opacity:1;stroke-dasharray:6, 6;stroke-dashoffset:0">
style="fill:#ffffff;fill-opacity:1;stroke-opacity:1;stroke-dasharray:6, 6;stroke-dashoffset:0">
<path
d="M 230.56836,162.02551 C 262.81763,162.02551 289,188.23279 289,220.5127 289,252.79272 262.81763,279 230.56836,279 c -32.24939,0 -58.43176,-26.20728 -58.43176,-58.4873 0,-32.27991 26.18237,-58.48719 58.43176,-58.48719 m 0,29.24366 c -16.12476,0 -29.21594,13.10363 -29.21594,29.24353 0,16.14001 13.09118,29.24365 29.21594,29.24365 16.12463,0 29.21582,-13.10364 29.21582,-29.24365 0,-16.1399 -13.09119,-29.24353 -29.21582,-29.24353"
style="fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-opacity:1;stroke-dasharray:6, 6;stroke-dashoffset:0"
style="fill:#ffffff;fill-opacity:1;stroke-opacity:1;stroke-dasharray:6, 6;stroke-dashoffset:0"
id="path2" />
</g>
</g>
<g
id="shape-d8ccbdb6-0d67-80f5-8007-0f3a77a9213d"
style="fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-opacity:1;stroke-dasharray:6, 6;stroke-dashoffset:0">
style="fill:#ffffff;fill-opacity:1;stroke-opacity:1;stroke-dasharray:6, 6;stroke-dashoffset:0">
<g
class="fills"
id="fills-d8ccbdb6-0d67-80f5-8007-0f3a77a9213d"
style="fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-opacity:1;stroke-dasharray:6, 6;stroke-dashoffset:0">
style="fill:#ffffff;fill-opacity:1;stroke-opacity:1;stroke-dasharray:6, 6;stroke-dashoffset:0">
<rect
rx="0"
ry="0"
@@ -78,7 +79,7 @@
transform="matrix(0.706771,-0.707443,0.706771,0.707443,-56.849936,138.40387)"
width="324.6871"
height="47.399578"
style="fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-opacity:1;stroke-dasharray:5.99999882, 5.99999882;stroke-dashoffset:0"
style="fill:#ffffff;fill-opacity:1;stroke-opacity:1;stroke-dasharray:5.99999882, 5.99999882;stroke-dashoffset:0"
id="rect4" />
</g>
</g>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB

43
web_main/themes/custom/mathallo/assets/img/formes/pyramide.svg
View File

@@ -5,6 +5,7 @@
id="screenshot-86032aec-245b-8085-8006-fcc8db0f2a47"
viewBox="166 965.643 299.99999 300.00001"
fill="none"
stroke="#1642bc"
version="1.1"
sodipodi:docname="pyramide.svg"
inkscape:version="1.4.3 (0d15f75042, 2025-12-25)"
@@ -22,31 +23,31 @@
id="use2-0" /></clipPath><path
d="M 458.56934,965.64209 633.07031,1475.6133 283.56299,1409.3257 458.56934,965.64209"
id="stroke-shape-render-2-86032aec-245b-8085-8006-fcc8db0f2a47-0-2"
style="fill:none;stroke:#142a6b;stroke-width:2;stroke-dasharray:11, 11;stroke-opacity:1" /><clipPath
style="fill:none;stroke-width:2;stroke-dasharray:11, 11;stroke-opacity:1" /><clipPath
id="inner-stroke-render-1-86032aec-245b-8085-8006-fcc8db0f2a46-0-7"><path
d="m 457.20117,966.11035 174.5,509.97165 235.63086,-266.5097 -410.13086,-243.46195"
id="use1-5"
style="fill:none;stroke:#142a6b;stroke-width:2;stroke-dasharray:11, 11;stroke-opacity:1" /></clipPath><clipPath
style="fill:none;stroke-width:2;stroke-dasharray:11, 11;stroke-opacity:1" /></clipPath><clipPath
id="clipPath5"><path
d="m 457.20117,966.11035 174.5,509.97165 235.63086,-266.5097 -410.13086,-243.46195"
id="use5"
style="fill:none;stroke:#142a6b;stroke-width:2;stroke-dasharray:11, 11;stroke-opacity:1" /></clipPath><path
style="fill:none;stroke-width:2;stroke-dasharray:11, 11;stroke-opacity:1" /></clipPath><path
d="m 457.20117,966.11035 174.5,509.97165 235.63086,-266.5097 -410.13086,-243.46195"
id="path5"
style="fill:none;stroke:#142a6b;stroke-width:2;stroke-dasharray:11, 11;stroke-opacity:1" /><clipPath
style="fill:none;stroke-width:2;stroke-dasharray:11, 11;stroke-opacity:1" /><clipPath
id="inner-stroke-render-1-86032aec-245b-8085-8006-fcc8db0f2a47-0"><use
href="#stroke-shape-render-1-86032aec-245b-8085-8006-fcc8db0f2a47-0"
id="use1" /></clipPath><path
d="M 458.56934,965.64209 633.07031,1475.6133 283.56299,1409.3257 458.56934,965.64209"
id="stroke-shape-render-1-86032aec-245b-8085-8006-fcc8db0f2a47-0"
style="fill:none;stroke:#142a6b;stroke-width:2;stroke-dasharray:11, 11;stroke-opacity:1" /><clipPath
style="fill:none;stroke-width:2;stroke-dasharray:11, 11;stroke-opacity:1" /><clipPath
id="clipPath4-7"><path
d="m 457.20117,966.11035 174.5,509.97165 235.63086,-266.5097 -410.13086,-243.46195"
id="use4-0"
style="fill:none;stroke:#142a6b;stroke-width:2;stroke-dasharray:11, 11;stroke-opacity:1" /></clipPath><path
style="fill:none;stroke-width:2;stroke-dasharray:11, 11;stroke-opacity:1" /></clipPath><path
d="m 457.20117,966.11035 174.5,509.97165 235.63086,-266.5097 -410.13086,-243.46195"
id="path4-9"
style="fill:none;stroke:#142a6b;stroke-width:2;stroke-dasharray:11, 11;stroke-opacity:1" /></defs><sodipodi:namedview
style="fill:none;stroke-width:2;stroke-dasharray:11, 11;stroke-opacity:1" /></defs><sodipodi:namedview
id="namedview2"
pagecolor="#ffffff"
bordercolor="#666666"
@@ -80,48 +81,48 @@
visible="false" /></sodipodi:namedview><g
id="shape-86032aec-245b-8085-8006-fcc8db0f2a46-5"
transform="matrix(0.47105857,0,0,0.47105857,47.435811,544.35641)"
style="fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-width:1;stroke-opacity:1;stroke-dasharray:12.73726987,12.73726987;stroke-dashoffset:0"><g
style="fill:#ffffff;fill-opacity:1;stroke-width:1;stroke-opacity:1;stroke-dasharray:12.73726987,12.73726987;stroke-dashoffset:0"><g
class="fills"
id="fills-86032aec-245b-8085-8006-fcc8db0f2a46-6"
style="fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-width:1;stroke-opacity:1;stroke-dasharray:12.73726987,12.73726987;stroke-dashoffset:0" /><g
style="fill:#ffffff;fill-opacity:1;stroke-width:1;stroke-opacity:1;stroke-dasharray:12.73726987,12.73726987;stroke-dashoffset:0" /><g
id="strokes-810b715b-abb2-8072-8007-9122d962ac84-86032aec-245b-8085-8006-fcc8db0f2a46-9"
class="strokes"
style="fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-width:1;stroke-opacity:1;stroke-dasharray:12.73726987,12.73726987;stroke-dashoffset:0"><g
style="fill:#ffffff;fill-opacity:1;stroke-width:1;stroke-opacity:1;stroke-dasharray:12.73726987,12.73726987;stroke-dashoffset:0"><g
class="inner-stroke-shape"
id="g2-1"
style="fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-width:1;stroke-opacity:1;stroke-dasharray:12.73726987,12.73726987;stroke-dashoffset:0"><defs
style="fill:#ffffff;fill-opacity:1;stroke-width:1;stroke-opacity:1;stroke-dasharray:12.73726987,12.73726987;stroke-dashoffset:0"><defs
id="defs2-2"><clipPath
id="clipPath4"><path
d="m 457.20117,966.11035 174.5,509.97165 235.63086,-266.5097 -410.13086,-243.46195"
id="use4"
style="fill:none;stroke:#142a6b;stroke-width:2;stroke-dasharray:11, 11;stroke-opacity:1" /></clipPath><path
style="fill:none;stroke-width:2;stroke-dasharray:11, 11;stroke-opacity:1" /></clipPath><path
d="m 457.20117,966.11035 174.5,509.97165 235.63086,-266.5097 -410.13086,-243.46195"
id="path4"
style="fill:none;stroke:#142a6b;stroke-width:2;stroke-dasharray:11, 11;stroke-opacity:1" /></defs><path
style="fill:none;stroke-width:2;stroke-dasharray:11, 11;stroke-opacity:1" /></defs><path
d="m 457.20117,966.11035 174.5,509.97165 235.63086,-266.5097 -410.13086,-243.46195"
id="use3-3"
style="fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-width:1;stroke-dasharray:12.73726987,12.73726987;stroke-opacity:1;stroke-dashoffset:0" /></g></g></g><g
style="fill:#ffffff;fill-opacity:1;stroke-width:1;stroke-dasharray:12.73726987,12.73726987;stroke-opacity:1;stroke-dashoffset:0" /></g></g></g><g
id="shape-86032aec-245b-8085-8006-fcc8db0f2a46-5-6"
transform="matrix(0.47105857,0,0,0.47105857,47.435811,544.35641)"
style="fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-width:1;stroke-opacity:1;stroke-dasharray:12.73726987,12.73726987;stroke-dashoffset:0"><g
style="fill:#ffffff;fill-opacity:1;stroke-width:1;stroke-opacity:1;stroke-dasharray:12.73726987,12.73726987;stroke-dashoffset:0"><g
class="fills"
id="fills-86032aec-245b-8085-8006-fcc8db0f2a46-6-2"
style="fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-width:1;stroke-opacity:1;stroke-dasharray:12.73726987,12.73726987;stroke-dashoffset:0" /><g
style="fill:#ffffff;fill-opacity:1;stroke-width:1;stroke-opacity:1;stroke-dasharray:12.73726987,12.73726987;stroke-dashoffset:0" /><g
id="strokes-810b715b-abb2-8072-8007-9122d962ac84-86032aec-245b-8085-8006-fcc8db0f2a46-9-9"
class="strokes"
style="fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-width:1;stroke-opacity:1;stroke-dasharray:12.73726987,12.73726987;stroke-dashoffset:0"><g
style="fill:#ffffff;fill-opacity:1;stroke-width:1;stroke-opacity:1;stroke-dasharray:12.73726987,12.73726987;stroke-dashoffset:0"><g
class="inner-stroke-shape"
id="g2-1-1"
style="fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-width:1;stroke-opacity:1;stroke-dasharray:12.73726987,12.73726987;stroke-dashoffset:0"><defs
style="fill:#ffffff;fill-opacity:1;stroke-width:1;stroke-opacity:1;stroke-dasharray:12.73726987,12.73726987;stroke-dashoffset:0"><defs
id="defs2-2-2"><clipPath
id="clipPath6"><path
d="m 457.20117,966.11035 174.5,509.97165 235.63086,-266.5097 -410.13086,-243.46195"
id="path6"
style="fill:none;stroke:#142a6b;stroke-width:2;stroke-dasharray:11, 11;stroke-opacity:1" /></clipPath><path
style="fill:none;stroke-width:2;stroke-dasharray:11, 11;stroke-opacity:1" /></clipPath><path
d="m 457.20117,966.11035 174.5,509.97165 235.63086,-266.5097 -410.13086,-243.46195"
id="path7"
style="fill:none;stroke:#142a6b;stroke-width:2;stroke-dasharray:11, 11;stroke-opacity:1" /></defs><path
style="fill:none;stroke-width:2;stroke-dasharray:11, 11;stroke-opacity:1" /></defs><path
d="m 457.20117,966.11035 174.5,509.97165 -349.50945,-66.2877 175.00945,-443.68395"
id="use3-3-3"
style="fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-width:1;stroke-dasharray:12.73726987,12.73726987;stroke-opacity:1;stroke-dashoffset:0"
style="fill:#ffffff;fill-opacity:1;stroke-width:1;stroke-dasharray:12.73726987,12.73726987;stroke-opacity:1;stroke-dashoffset:0"
sodipodi:nodetypes="cccc" /></g></g></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.4 KiB

After

Width:  |  Height:  |  Size: 7.2 KiB

13
web_main/themes/custom/mathallo/assets/img/formes/supeg.svg
View File

@@ -5,6 +5,7 @@
id="screenshot-d8ccbdb6-0d67-80f5-8007-0f3b52c5e036"
viewBox="-62.985 -37.071 299.99999 300"
fill="none"
stroke="#1642bc"
version="1.1"
sodipodi:docname="supeg.svg"
inkscape:version="1.4.3 (0d15f75042, 2025-12-25)"
@@ -40,24 +41,24 @@
style="stroke-width:1.36334">
<g
id="shape-d8ccbdb6-0d67-80f5-8007-0f3b52c5e037"
style="stroke-width:1.3633431;fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-opacity:1;opacity:1;stroke-dasharray:8.18005871,8.18005871;stroke-dashoffset:0">
style="stroke-width:1.3633431;fill:#ffffff;fill-opacity:1;stroke-opacity:1;opacity:1;stroke-dasharray:8.18005871,8.18005871;stroke-dashoffset:0">
<g
class="fills"
id="fills-d8ccbdb6-0d67-80f5-8007-0f3b52c5e037"
style="stroke-width:1.3633431;fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-opacity:1;stroke-dasharray:8.18005871,8.18005871;stroke-dashoffset:0">
style="stroke-width:1.3633431;fill:#ffffff;fill-opacity:1;stroke-opacity:1;stroke-dasharray:8.18005871,8.18005871;stroke-dashoffset:0">
<path
d="M 29.890766,312.68713 168.84407,144.37196 -46.326336,107.76918 -37.184612,53.382702 233.33333,99.400772 234.52187,99.363419 247.70168,135.4767 72.350784,347.88098 29.890766,312.68713"
style="fill:#ffffff;fill-opacity:1;stroke-width:1.3633431;stroke:#1642bc;stroke-opacity:1;stroke-dasharray:8.18005871,8.18005871;stroke-dashoffset:0"
style="fill:#ffffff;fill-opacity:1;stroke-width:1.3633431;stroke-opacity:1;stroke-dasharray:8.18005871,8.18005871;stroke-dashoffset:0"
id="path1" />
</g>
</g>
<g
id="shape-d8ccbdb6-0d67-80f5-8007-0f3b52c5e038"
style="stroke-width:1.3633431;fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-opacity:1;opacity:1;stroke-dasharray:8.18005871,8.18005871;stroke-dashoffset:0">
style="stroke-width:1.3633431;fill:#ffffff;fill-opacity:1;stroke-opacity:1;opacity:1;stroke-dasharray:8.18005871,8.18005871;stroke-dashoffset:0">
<g
class="fills"
id="fills-d8ccbdb6-0d67-80f5-8007-0f3b52c5e038"
style="stroke-width:1.3633431;fill:#ffffff;fill-opacity:1;stroke:#1642bc;stroke-opacity:1;stroke-dasharray:8.18005871,8.18005871;stroke-dashoffset:0">
style="stroke-width:1.3633431;fill:#ffffff;fill-opacity:1;stroke-opacity:1;stroke-dasharray:8.18005871,8.18005871;stroke-dashoffset:0">
<rect
rx="0"
ry="0"
@@ -66,7 +67,7 @@
transform="matrix(0.636637,-0.771164,-0.76991,-0.638152,308.28052,655.55371)"
width="275.43353"
height="55.149281"
style="fill:#ffffff;fill-opacity:1;stroke-width:1.36334443;stroke:#1642bc;stroke-opacity:1;stroke-dasharray:8.18006669,8.18006669;stroke-dashoffset:0"
style="fill:#ffffff;fill-opacity:1;stroke-width:1.36334443;stroke-opacity:1;stroke-dasharray:8.18006669,8.18006669;stroke-dashoffset:0"
id="rect2" />
</g>
</g>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 3.0 KiB

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

@@ -33,8 +33,23 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
const MathalloTheme = function () {
const _is_front = drupalSettings.path.isFront
console.log('drupalSettings', drupalSettings)
// liste forme file names
const formesclasses = [
'pyramide',
'prct',
'infinite',
'pi',
'supeg',
'cone',
'croissant',
'cube',
'diamant',
'cylindre'
]
let sizes = [];
// let _I18n
// ___ _ _
// |_ _|_ _ (_) |_
@@ -80,40 +95,23 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
async function initBgFormes(){
const container = document.querySelector('main[role="main"] > .layout-content > .wrapper');
console.log('container', container);
// liste forme file names
const formesclasses = [
'pyramide',
'prct',
'infinite',
'pi',
'supeg',
'cone',
'croissant',
'cube',
'diamant',
'cylindre'
]
// console.log('container', container);
// listes all available sizes
let 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)
}
console.log('sizes', sizes);
// console.log('sizes', sizes);
let cards = document.querySelectorAll('.field-card, .node-type-chapitre, .node-type-partie');
console.log('cards', cards);
// console.log('cards', cards);
let used_n = [];
let oddeven=1;
for (const card of cards) {
console.log('card', card);
// console.log('card', card);
let forme = document.createElement('div');
forme.classList.add('bg-forme');
// random forme
// avoid duplicated formes
let n = Math.round(Math.random() * (formesclasses.length -1));
@@ -121,20 +119,121 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
n = Math.round(Math.random() * (formesclasses.length -1));
}
used_n.push(n);
console.log('n',n, 'class', formesclasses[n]);
// console.log('n',n, 'class', formesclasses[n]);
let forme = await createForme(card, n);
container.prepend(forme);
// Snap au centre de la fenêtre pour la card en utilisant le plugin Snap de GSAP
// ScrollTrigger.create({
// trigger: document.querySelector('.partie-principes-pratique'),
// start: "top 60%",
// end: "bottom 40%",
// snap: {
// snapTo: "top", // Snap au centre de la fenêtre
// duration: {min: 0.2, max: 0.5}, // Durée de l'animation de snap
// delay: 0, // Pas de délai
// ease: "power3.out" // Type d'easing pour l'animation
// }
// });
// Animation des cards au scroll
gsap.timeline({
scrollTrigger: {
trigger: card,
start: "top bottom",
end: "bottom top",
scrub: true,
ease: "power4.out",
snap: false,
// markers: true,
// onToggle: (self) => {
// console.log('card scroll toggled, self:', self)
// },
}
})
.from(card.children, {
opacity: 0.4,
}, 0)
.to(card.children, {
opacity: 1,
}, 0.5)
.to(card.children, {
opacity: 0.4,
}, 0.7)
.from(card, {
translateX: `${200 * oddeven}px`,
translateY: `${100 * oddeven}px`
}, 0)
.to(card, {
translateX: "0",
translateY: "0"
}, 0.5);
// .to(card, {
// 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'), {
scrollTrigger: {
trigger: forme,
start: "top bottom",
end: "bottom top",
scrub: true,
ease: "power4.out"
},
rotation: 45,
skewX: 10
});
// Animation de couleur des formes uniquement au centre de l'écran
gsap.timeline({
scrollTrigger: {
trigger: forme,
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,
markers: false // Désactivez les marqueurs en production
}
})
.to(forme.querySelector('svg'), {
stroke: "#f661e2", // Passage au rose
duration: 0.1
}, 0.4) // 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
}
}
async function createForme(card, n){
let forme = document.createElement('div');
forme.classList.add('bg-forme');
// forme.classList.add(formesclasses[n]);
// inject svg from file
const response = await fetch(`/themes/custom/mathallo/assets/img/formes/${formesclasses[n]}.svg`)
const svgText = await response.text();
forme.innerHTML = svgText;
const svgNode = forme.querySelector('svg');
const init_wh = svgNode.getAttribute('width');
// get the svg ode
const svgNode = forme.querySelector('svg');
// random size
// let wh = 150 + Math.random()*350;
// pic a size
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
forme.style.width = forme.style.height = `${wh}px`;
svgNode.setAttribute('width', wh);
svgNode.setAttribute('height', wh);
@@ -142,8 +241,7 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
// 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);
// console.log('paths', paths);
paths.forEach(path => {
const init_SW = parseFloat(path.getAttribute('stroke-width')) || 1;
let new_SW = init_SW / scale;
@@ -169,9 +267,7 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
forme.style.left = Math.random() > 0.5 ? `${card.offsetLeft - wh}px` : `${card.offsetLeft + card.clientWidth}px`;
}
container.prepend(forme);
}
return forme;
}
function initBgAnime(){
@@ -187,6 +283,10 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
wrapper: 'main[role="main"]',
content: 'main[role="main"]>.layout-content'
});
}
// function initVues(){

4
web_main/themes/custom/mathallo/assets/scss/main.scss
View File

@@ -265,7 +265,7 @@ main[role="main"]{
&>div.layout-content{
&>.wrapper{
position:relative;
padding-bottom: 20em;
padding-bottom: 100vh;
}
nav.arrow-more{
text-align: center;
@@ -431,7 +431,7 @@ main[role="main"]{
}
&.field-en-pratique{
margin-left: -50%;
margin-top: 7em;
transform: translateY(2em);
@include back-card();
}
&.field-principes-reflexion,

2
web_main/themes/custom/mathallo/assets/scss/partials/colors.scss
View File

@@ -1,3 +1,3 @@
$bleu_site: #1642bc;
$bleu_typo: #0b1e52;
$rose: #f661e2
$rose: #f661e2;

3
web_main/themes/custom/mathallo/assets/scss/partials/mixins.scss
View File

@@ -31,6 +31,7 @@
padding:2em;
box-shadow: 0 0 10px rgba(0,0,0,0.25);
max-width: 50em;
margin: 10em auto 0;
margin: 40vh auto 0;
box-sizing: content-box;
}