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

smooth animation front

This commit is contained in:
ouidade 2024-05-08 16:48:46 +02:00
parent e707a3c590
commit 4c952d315a
4 changed files with 224 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
web/themes/custom/quartiers_de_demain/images/rond_1.svg Normal file
View File

@ -0,0 +1,53 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="48.346359mm"
height="48.607445mm"
viewBox="0 0 48.346359 48.607445"
version="1.1"
id="svg1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1">
<clipPath
id="Clip0-5">
<path
d="M 0,0 H 137.045 V 137.783 H 0 Z"
id="path1-6" />
</clipPath>
</defs>
<g
id="layer1"
transform="translate(-14.845658,-79.045126)">
<g
clip-path="url(#Clip0-5)"
style="fill:none;stroke:none"
transform="matrix(0.35277777,0,0,0.35277777,14.845653,79.045124)"
clip-rule="evenodd"
id="Groupe 143">
<path
style="fill:none;stroke:#a8b7ec;stroke-width:15.8528;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none"
transform="translate(7.92641,7.92641)"
d="M 121.192,60.9649 C 121.192,94.6361 94.0635,121.93 60.596,121.93 27.1298,121.93 0,94.6361 0,60.9649 0,27.2949 27.1298,0 60.596,0 c 33.4675,0 60.596,27.2949 60.596,60.9649 z"
id="path37" />
<g
transform="translate(0.0632929,26.8707)"
id="g38">
<path
id="use37"
d="m 68.6784,60.3954 h 3.2574 v -37.38 h -3.4176 l -12.816,6.8352 1.8156,2.403 11.1606,-5.9274 z"
style="fill:#171615;stroke:none;stroke-width:5.34" />
<path
style="fill:none;stroke:none"
d="M 0,0 H 135.625 V 105.055 H 0 Z"
id="path38" />
</g>
</g>
<path
id="path37-3"
style="color:#000000;clip-rule:evenodd;fill:#0632c2;fill-opacity:1;-inkscape-stroke:none"
d="m 14.846185,103.34862 c 5.61e-4,13.37996 10.845546,24.30395 24.17165,24.30395 h 0.001 v -5.59398 h -0.001 c -10.285402,0 -18.579708,-8.33404 -18.580261,-18.70997 z" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

61
web/themes/custom/quartiers_de_demain/images/rond_2.svg Normal file
View File

@ -0,0 +1,61 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="48.607449mm"
height="48.346363mm"
viewBox="0 0 48.607449 48.346363"
version="1.1"
id="svg1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1">
<clipPath
id="Clip0-5-1">
<path
d="M 0,0 H 137.045 V 137.783 H 0 Z"
id="path1-6-8" />
</clipPath>
</defs>
<g
id="layer1"
transform="translate(-81.077257,-79.175665)">
<g
clip-path="url(#Clip0-5-1)"
style="fill:none;stroke:none"
transform="matrix(0,0.35277777,-0.35277777,0,129.68471,79.175666)"
clip-rule="evenodd"
id="Groupe 143-9">
<path
style="fill:none;stroke:#a8b7ec;stroke-width:15.8528;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none"
transform="translate(7.92641,7.92641)"
d="M 121.192,60.9649 C 121.192,94.6361 94.0635,121.93 60.596,121.93 27.1298,121.93 0,94.6361 0,60.9649 0,27.2949 27.1298,0 60.596,0 c 33.4675,0 60.596,27.2949 60.596,60.9649 z"
id="path37-2" />
<g
transform="translate(0.0632929,26.8707)"
id="g38-0">
<path
style="fill:none;stroke:none"
d="M 0,0 H 135.625 V 105.055 H 0 Z"
id="path38-3" />
</g>
</g>
<path
id="path37-3-7"
style="color:#000000;clip-rule:evenodd;fill:#0632c2;fill-opacity:1;-inkscape-stroke:none"
d="M 105.38121,79.176198 C 92.001242,79.176759 81.077257,90.021745 81.077257,103.34785 v 0.001 h 5.59398 v -0.001 c 0,-10.285403 8.334035,-18.579709 18.709973,-18.580262 z" />
<g
transform="matrix(0.35277777,0,0,0.35277777,81.077257,88.524262)"
id="g429">
<path
id="use429"
d="M 55.63,60.3954 H 80.0872 V 57.405 H 59.6884 L 70.6888,45.924 c 5.073,-5.34 8.277,-9.0246 8.277,-14.151 0,-5.874 -4.7526,-9.8256 -10.7868,-9.8256 -5.3934,0 -9.345,2.4564 -12.282,6.9954 l 2.7768,1.7088 c 2.2962,-3.8448 5.1264,-5.6604 9.2916,-5.6604 4.272,0 7.5828,2.4564 7.5828,6.942 0,4.4322 -2.136,6.6216 -7.3692,12.1752 L 55.63,57.405 Z"
style="fill:#171615;stroke:none;stroke-width:5.34" />
<path
style="fill:none;stroke:none"
d="M 0,0 H 135.625 V 105.055 H 0 Z"
id="path429" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

61
web/themes/custom/quartiers_de_demain/images/rond_3.svg Normal file
View File

@ -0,0 +1,61 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="48.346352mm"
height="48.607452mm"
viewBox="0 0 48.346352 48.607452"
version="1.1"
id="svg1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1">
<clipPath
id="Clip0-5-1-2">
<path
d="M 0,0 H 137.045 V 137.783 H 0 Z"
id="path1-6-8-2" />
</clipPath>
</defs>
<g
id="layer1"
transform="translate(-146.21314,-79.045126)">
<g
clip-path="url(#Clip0-5-1-2)"
style="fill:none;stroke:none"
transform="matrix(-0.35277777,0,0,-0.35277777,194.5595,127.65258)"
clip-rule="evenodd"
id="Groupe 143-9-9">
<path
style="fill:none;stroke:#a8b7ec;stroke-width:15.8528;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none"
transform="translate(7.92641,7.92641)"
d="M 121.192,60.9649 C 121.192,94.6361 94.0635,121.93 60.596,121.93 27.1298,121.93 0,94.6361 0,60.9649 0,27.2949 27.1298,0 60.596,0 c 33.4675,0 60.596,27.2949 60.596,60.9649 z"
id="path37-2-7" />
<g
transform="translate(0.0632929,26.8707)"
id="g38-0-3">
<path
style="fill:none;stroke:none"
d="M 0,0 H 135.625 V 105.055 H 0 Z"
id="path38-3-6" />
</g>
</g>
<path
id="path37-3-7-1"
style="color:#000000;clip-rule:evenodd;fill:#0632c2;fill-opacity:1;-inkscape-stroke:none"
d="M 194.55896,103.34908 C 194.5584,89.969116 183.71342,79.045126 170.38731,79.045126 h -0.001 v 5.59398 h 0.001 c 10.28541,0 18.57971,8.33404 18.58026,18.709974 z" />
<g
transform="matrix(0.35277777,0,0,0.35277777,146.6265,88.524262)"
id="g428">
<path
id="use428"
d="m 80.2474,50.3028 c 0,-4.539 -2.5098,-8.4372 -7.209,-9.9858 3.5778,-1.7088 5.5002,-4.9662 5.5002,-8.6508 0,-5.8206 -4.6458,-9.7188 -10.947,-9.7188 -5.073,0 -8.811,2.403 -11.4276,6.7284 l 2.7768,1.7088 c 1.9758,-3.6846 4.8594,-5.3934 8.544,-5.3934 4.3254,0 7.5828,2.403 7.5828,6.8352 0,4.1118 -2.9904,7.209 -7.9566,7.209 h -5.5536 v 2.937 h 6.5148 c 5.4468,0 8.7576,3.471 8.7576,8.2236 0,5.2332 -4.005,8.2236 -9.2916,8.2236 -4.4322,0 -7.743,-1.6554 -10.1994,-5.8206 l -2.8836,1.8156 c 2.8836,4.6992 6.9954,7.0488 13.1364,7.0488 7.3158,0 12.6558,-4.539 12.6558,-11.1606 z"
style="fill:#171615;stroke:none;stroke-width:5.34" />
<path
style="fill:none;stroke:none"
d="M 0,0 H 135.625 V 105.055 H 0 Z"
id="path428" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

63
web/themes/custom/quartiers_de_demain/js/animated_logo.js
View File

@ -27,7 +27,7 @@ function setLogoContainerSize() {
function startCountdown() {
let startTime;
let animationTime = 2000;
let animationTime = 1800;
function animate(timestamp) {
if (!startTime) startTime = timestamp;
@ -45,24 +45,59 @@ function setLogoContainerSize() {
requestAnimationFrame(animate);
}
function animateLogo(animationPercent) {
for (let i = 0; i < chemins.length; i++) {
let draw = chemins[i].getTotalLength() * animationPercent;
chemins[i].style.strokeDashoffset = chemins[i].getTotalLength() - draw;
chemins[i].style.opacity = Math.min(animationPercent * ((chemins.length - 1) / i), 1);
}
let animationPercentCouleur = Math.min(animationPercent / 0.5, 1);
let animationPercentNoir = Math.max((animationPercent - 0.4) / 0.6, 0);
// function animateLogo(animationPercent) {
// for (let i = 0; i < chemins.length; i++) {
// let draw = chemins[i].getTotalLength() * animationPercent;
// chemins[i].style.strokeDashoffset = chemins[i].getTotalLength() - draw;
// chemins[i].style.opacity = Math.min(animationPercent * ((chemins.length - 1) / i), 1);
// }
// let animationPercentCouleur = Math.min(animationPercent / 0.5, 1);
// let animationPercentNoir = Math.max((animationPercent - 0.4) / 0.6, 0);
// consultationCouleur.style.opacity = animationPercentCouleur;
// consultationNoir.style.opacity = animationPercentNoir;
// quartierCouleur.style.opacity = animationPercentCouleur;
// quartierNoir.style.opacity = animationPercentNoir;
// consultationNoir.style.transform = `translate(${consultationTranslate * (animationPercent - 1)}px, ${consultationTranslate * (animationPercent - 1)}px)`;
// quartierNoir.style.transform = `translate(${quartierTranslate * (animationPercent - 1)}px, ${quartierTranslate * (animationPercent - 1)}px)`;
// }
function animateLogo(animationPercent) {
// Calcul du pourcentage de l'animation principale
let mainAnimationPercent = animationPercent;
// Décalage pour l'animation des éléments noir
let noirDelay = 0.7; // Exemple de décalage de 30% de l'animation principale
let noirQuartierDelay = 0.1; // Exemple de décalage de 30% de l'animation principale
// Calcul du pourcentage de l'animation pour les éléments noir avec décalage
let animationPercentNoir = Math.max((mainAnimationPercent - noirDelay) / (1 - noirDelay), 0);
for (let i = 0; i < chemins.length; i++) {
let draw = chemins[i].getTotalLength() * mainAnimationPercent;
chemins[i].style.strokeDashoffset = chemins[i].getTotalLength() - draw;
chemins[i].style.opacity = Math.min(mainAnimationPercent * ((chemins.length - 1) / i), 1);
}
let animationPercentCouleur = Math.min(mainAnimationPercent / 0.5, 1);
let animationPercentNoirQuartier = Math.max((mainAnimationPercent - noirQuartierDelay) / (1 - noirQuartierDelay), 0);
for (let i = 0; i < chemins.length; i++) {
let draw = chemins[i].getTotalLength() * mainAnimationPercent;
chemins[i].style.strokeDashoffset = chemins[i].getTotalLength() - draw;
chemins[i].style.opacity = Math.min(mainAnimationPercent * ((chemins.length - 1) / i), 1);
}
consultationCouleur.style.opacity = animationPercentCouleur;
consultationNoir.style.opacity = animationPercentNoir;
quartierCouleur.style.opacity = animationPercentCouleur;
quartierNoir.style.opacity = animationPercentNoir;
quartierNoir.style.opacity = animationPercentNoirQuartier;
consultationNoir.style.transform = `translate(${consultationTranslate * (animationPercent - 1)}px, ${consultationTranslate * (animationPercent - 1)}px)`;
quartierNoir.style.transform = `translate(${quartierTranslate * (animationPercent - 1)}px, ${quartierTranslate * (animationPercent - 1)}px)`;
}
// Décalage des éléments noir dans le temps
consultationNoir.style.transform = `translate(${consultationTranslate * (mainAnimationPercent - 1)}px, ${consultationTranslate * (mainAnimationPercent - 1)}px)`;
quartierNoir.style.transform = `translate(${quartierTranslate * (mainAnimationPercent - 1)}px, ${quartierTranslate * (mainAnimationPercent - 1)}px)`;
}