fond

web/themes/custom/colloque2024/colloque2024.libraries.yml

@@ -14,5 +14,6 @@ global-scripts:
     js/flickity.pkgd.min.js: {}
     js/lightbox.js: {}
     js/script.js: {}
+    js/animation_home.js: {}
   dependencies:
     - core/jquery

web/themes/custom/colloque2024/css-compiled/components/hero.css

@@ -0,0 +1,73 @@
+body {
+  overflow-x: hidden; }
+
+.home .__img-hero {
+  display: none;
+  width: 100vw;
+  position: relative;
+  left: 50%;
+  right: 50%;
+  margin-left: -50vw;
+  margin-right: -50vw; }
+
+.__img-hero {
+  height: 300px;
+  width: 100vw;
+  position: relative;
+  left: 50%;
+  right: 50%;
+  margin-left: -50vw;
+  margin-right: -50vw; }
+  .__img-hero img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover; }
+
+.participant_full {
+  flex-direction: column;
+  margin-top: 2rem; }
+  @media screen and (min-width: 992px) {
+    .participant_full {
+      margin-top: 0rem; } }
+  .participant_full .hero figure {
+    width: 100%; }
+    .participant_full .hero figure .__img > div {
+      margin: auto;
+      width: 250px;
+      height: 250px; }
+    .participant_full .hero figure .__img img {
+      border-radius: 100%;
+      width: 100%;
+      height: 100%;
+      object-fit: cover; }
+    .participant_full .hero figure figcaption {
+      align-self: center;
+      text-align: center;
+      margin: 2rem 0; }
+
+@media screen and (min-width: 768px) {
+  .__img-hero {
+    height: 500px;
+    width: auto;
+    position: relative;
+    left: 0;
+    right: 0;
+    margin-left: auto;
+    margin-right: auto; } }
+
+@media screen and (min-width: 768px) {
+  .participant_full .hero figure {
+    width: 100%; }
+    .participant_full .hero figure .__img {
+      margin-right: 2rem; }
+      .participant_full .hero figure .__img > div {
+        width: 300px;
+        height: 300px; }
+      .participant_full .hero figure .__img img {
+        border-radius: 100%;
+        width: 100%;
+        height: 100%;
+        object-fit: cover; }
+    .participant_full .hero figure figcaption {
+      align-self: center;
+      text-align: left; } }

web/themes/custom/colloque2024/css-compiled/pages/layout.css

@@ -13,21 +13,13 @@ body {
     content: " ";
     width: 100%;
     height: 100%;
+    background-image: url("../images/fond-ronds.svg");
+    background-repeat: no-repeat;
+    background-size: content;
     display: block;
     position: absolute;
     top: 0;
     left: 0; }
-  body::after {
-    z-index: -1;
-    content: " ";
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(to top, rgba(255, 255, 255, 0.8), white, rgba(255, 255, 255, 0.8));
-    display: block;
-    position: absolute;
-    transform: translateY(-50%);
-    top: 50%;
-    left: 0; }
 
 article.publications, article.interviews {
   margin-top: 1rem; }

web/themes/custom/colloque2024/css/components/hero.scss

@@ -3,6 +3,7 @@ body{
 }
 .home{
   .__img-hero{
+    display: none;
     width: 100vw;
     position: relative;
     left: 50%;

web/themes/custom/colloque2024/css/configs/animation.scss

@@ -0,0 +1,107 @@
+@keyframes animateCircle_pop_trans {
+    0% {stroke: #000000; /* Initial stroke color */}
+    100% {stroke: #ff0000; /* Final stroke color */}
+  }
+  
+  @keyframes animateCircle_pop_trans-2 {
+    0% {fill: #ffffff; /* Initial fill color */}
+    100% {fill: #00ff00; /* Final fill color */}
+  }
+
+  @keyframes animateCircle_vert_clair_erable {
+    0% {stroke: #000000; /* Initial stroke color */}
+    100% {stroke: #ff0000; /* Final stroke color */}
+  }
+  
+  @keyframes animateCircle_vert_clair_erable-93 {
+    0% {fill: #ffffff; /* Initial fill color */}
+    100% {fill: #00ff00; /* Final fill color */}
+  }
+  
+  @keyframes animateCircle_vert_clair_erable-9 {
+    0% {stroke: #000000; /* Initial stroke color */}
+    100% {stroke: #ff0000; /* Final stroke color */}
+  }
+  
+  @keyframes animateCircle_vert_clair_erable-3 {
+    0% {fill: #ffffff; /* Initial fill color */}
+    100% {fill: #00ff00; /* Final fill color */}
+  }
+
+  @keyframes animateCircle_vert_clair_erable-3-1 {
+    0% {stroke: #000000; /* Initial stroke color */}
+    100% {stroke: #ff0000; /* Final stroke color */}
+  }
+  
+  @keyframes animateCircle_vert_clair_erable-3-1-7 {
+    0% {fill: #ffffff; /* Initial fill color */}
+    100% {fill: #00ff00; /* Final fill color */}
+  }
+
+  @keyframes animateCircle_vert_erable {
+    0% {stroke: #000000; /* Initial stroke color */}
+    100% {stroke: #ff0000; /* Final stroke color */}
+  }
+  
+  @keyframes animateCircle_vert_erable-4 {
+    0% {fill: #ffffff; /* Initial fill color */}
+    100% {fill: #00ff00; /* Final fill color */}
+  }
+
+  @keyframes animateCircle_vert_erable-4-6 {
+    0% {stroke: #000000; /* Initial stroke color */}
+    100% {stroke: #ff0000; /* Final stroke color */}
+  }
+  
+  @keyframes animateCircle_vert_erable-4-3 {
+    0% {fill: #ffffff; /* Initial fill color */}
+    100% {fill: #00ff00; /* Final fill color */}
+  }
+  
+  @keyframes animateCircle_vert_erable-2 {
+    0% {stroke: #000000; /* Initial stroke color */}
+    100% {stroke: #ff0000; /* Final stroke color */}
+  }
+  
+  @keyframes animateCircle_orange-6 {
+    0% {
+        transform: translateX(0); /* Start translation */
+      }
+      100% {
+        transform: translateX(50px); /* End translation */
+      }
+  }
+
+  @keyframes animateCircle_orange-7 {
+    0% {stroke: #000000; /* Initial stroke color */}
+    100% {stroke: #ff0000; /* Final stroke color */}
+  }
+  
+  @keyframes animateCircle_orange-2 {
+    0% {fill: #ffffff; /* Initial fill color */}
+    100% {fill: #00ff00; /* Final fill color */}
+  }
+
+  @keyframes animateCircle_orange-9 {
+    0% {stroke: #000000; /* Initial stroke color */}
+    100% {stroke: #ff0000; /* Final stroke color */}
+  }
+  
+  @keyframes animateCircle_orange {
+    0% {fill: #ffffff; /* Initial fill color */}
+    100% {fill: #00ff00; /* Final fill color */}
+  }
+
+
+  /* Add more keyframes for other paths as needed */
+  
+  #circle_pop_trans {
+    animation: animatePath1 2s infinite alternate; /* Animate stroke color */
+  }
+  
+  #circle_orange-6 {
+    animation: animateCircle_orange-6 2s infinite alternate; /* Animate fill color */
+  }
+  
+  /* Apply animations to other paths similarly */
+  

web/themes/custom/colloque2024/css/configs/global.scss

@@ -2,7 +2,7 @@ body,html{
   font-size: 16px;
   font-family: 'Marianne', "sans-serif";
   line-height: 1.2;
-  background: $fond;
+  // background: $fond;
   .is-active{
     overflow: hidden;
   }

web/themes/custom/colloque2024/css/configs/var.scss

@@ -4,7 +4,7 @@ $color2024: rgb(3,135,136);
 $col_black: black;
 $color_orange: rgb(255, 128, 77);
 $lightgrey: #6f6d7dff;
-$fond: white;
+// $fond: url("../../images/test_animation.svg");
 $underline:#d2d2ebff;
 
 $gutter: 0.5rem;

web/themes/custom/colloque2024/css/index.scss

@@ -12,6 +12,7 @@
 @import "configs/mixin.scss";
 @import "configs/typography.scss";
 @import "configs/global.scss";
+@import "configs/animation.scss";
 
 // Lib Js
 @import "hamburgers/hamburgers.scss";

web/themes/custom/colloque2024/css/pages/front.scss

@@ -119,7 +119,7 @@ header {
         padding: 0.5rem 1rem;
         font-size: 12px;
         display: block;
-        font-family: "truenobold";
+        font-family: "Mariannebold";
         color: $color2;
       }
     }
@@ -179,3 +179,7 @@ header {
     }
   }
 }
+
+#block-colloque2024-mainpagecontent{
+  background-color: transparent;
+}

web/themes/custom/colloque2024/css/pages/layout.scss

@@ -15,30 +15,30 @@ body {
     content: " ";
     width: 100%;
     height: 100%;
-    // background-image: url("../images/croix_fond.svg");
-    // background-size: content;
+    background-image: url("../images/fond-ronds.svg");
+    background-repeat: no-repeat;
+    background-size: content;
     display: block;
     position: absolute;
     top: 0;
     left: 0;
   }
-  &::after {
-    z-index: -1;
-    content: " ";
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(
-      to top,
-      rgba(255, 255, 255, 0.8),
-      white,
-      rgba(255, 255, 255, 0.8)
-    );
-    display: block;
-    position: absolute;
-    transform: translateY(-50%);
-    top: 50%;
-    left: 0;
-  }
+  // &::after {
+  //   z-index: -1;
+  //   content: " ";
+  //   width: 100%;
+  //   height: 100%;
+  //   background: linear-gradient(
+  //     to top,
+  //     white,
+  //     rgba(255, 255, 255, 0.8)
+  //   );
+  //   display: block;
+  //   position: absolute;
+  //   transform: translateY(-100%);
+  //   top: 100%;
+  //   left: 0;
+  // }
 }
 
 article {

web/themes/custom/colloque2024/images/fond-ronds.svg

@@ -0,0 +1,129 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="1900"
+   height="1500"
+   viewBox="0 0 502.70834 396.875"
+   version="1.1"
+   id="svg1"
+   xml:space="preserve"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
+   sodipodi:docname="fond-rond.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     inkscape:zoom="0.25575084"
+     inkscape:cx="643.20414"
+     inkscape:cy="-11.730167"
+     inkscape:window-width="1920"
+     inkscape:window-height="1016"
+     inkscape:window-x="0"
+     inkscape:window-y="36"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" /><defs
+     id="defs1" /><g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-51.525162,-32.699875)"><circle
+       style="fill:#349a84;fill-opacity:1;stroke:#d24f4f;stroke-width:0.0315418;paint-order:fill markers stroke"
+       id="circle_pop_trans"
+       cx="91.660561"
+       cy="84.505714"
+       r="15" /><circle
+       style="fill:#349a84;fill-opacity:1;stroke:#d24f4f;stroke-width:0.0315418;paint-order:fill markers stroke"
+       id="circle_pop_trans-2"
+       cx="91.907585"
+       cy="302.79398"
+       r="15" /><circle
+       style="fill:#b9ce00;fill-opacity:1;stroke:#b9ce00;stroke-width:0.0338082;paint-order:fill markers stroke"
+       id="circle_vert_clair_erable"
+       cx="135.62831"
+       cy="280.55023"
+       r="15" /><circle
+       style="fill:#b9ce00;fill-opacity:1;stroke:#b9ce00;stroke-width:0.0338082;paint-order:fill markers stroke"
+       id="circle_vert_clair_erable-93"
+       cx="91.944618"
+       cy="357.42755"
+       r="15" /><circle
+       style="fill:#b9ce00;fill-opacity:1;stroke:#b9ce00;stroke-width:0.0338082;paint-order:fill markers stroke"
+       id="circle_vert_clair_erable-9"
+       cx="268.75085"
+       cy="89.481499"
+       r="15" /><circle
+       style="fill:#b9ce00;fill-opacity:1;stroke:#b9ce00;stroke-width:0.0338082;paint-order:fill markers stroke"
+       id="circle_vert_clair_erable-3"
+       cx="465.39377"
+       cy="90.513245"
+       r="15" /><circle
+       style="fill:#b9ce00;fill-opacity:1;stroke:#b9ce00;stroke-width:0.0338082;paint-order:fill markers stroke"
+       id="circle_vert_clair_erable-3-1"
+       cx="396.14969"
+       cy="194.12924"
+       r="15" /><circle
+       style="fill:#b9ce00;fill-opacity:1;stroke:#b9ce00;stroke-width:0.0338082;paint-order:fill markers stroke"
+       id="circle_vert_clair_erable-3-1-7"
+       cx="265.71008"
+       cy="196.22624"
+       r="15" /><circle
+       style="fill:#038788;fill-opacity:1;stroke:#d24f4f;stroke-width:0.0322973;paint-order:fill markers stroke;image-rendering:auto"
+       id="circle_vert_erable"
+       cx="343.56995"
+       cy="91.230217"
+       r="15" /><circle
+       style="fill:#038788;fill-opacity:1;stroke:#d24f4f;stroke-width:0.0322973;paint-order:fill markers stroke;image-rendering:auto"
+       id="circle_vert_erable-4"
+       cx="509.92899"
+       cy="147.45335"
+       r="15" /><circle
+       style="fill:#038788;fill-opacity:1;stroke:#d24f4f;stroke-width:0.0322973;paint-order:fill markers stroke;image-rendering:auto"
+       id="circle_vert_erable-4-6"
+       cx="311.31354"
+       cy="276.85425"
+       r="15" /><circle
+       style="fill:#038788;fill-opacity:1;stroke:#d24f4f;stroke-width:0.0322973;paint-order:fill markers stroke;image-rendering:auto"
+       id="circle_vert_erable-4-3"
+       cx="209.94034"
+       cy="196.07504"
+       r="15" /><circle
+       style="fill:#038788;fill-opacity:1;stroke:#d24f4f;stroke-width:0.0322973;paint-order:fill markers stroke;image-rendering:auto"
+       id="circle_vert_erable-2"
+       cx="173.57346"
+       cy="113.27168"
+       r="15" /><circle
+       style="fill:#ff804d;fill-opacity:1;stroke:#d24f4f;stroke-width:0.0322973;paint-order:fill markers stroke"
+       id="circle_orange"
+       cx="465.94473"
+       cy="195.32918"
+       r="15" /><circle
+       style="fill:#ff804d;fill-opacity:1;stroke:#d24f4f;stroke-width:0.0322973;paint-order:fill markers stroke"
+       id="circle_orange-7"
+       cx="345.21384"
+       cy="197.09705"
+       r="15" /><circle
+       style="fill:#ff804d;fill-opacity:1;stroke:#d24f4f;stroke-width:0.0322973;paint-order:fill markers stroke"
+       id="circle_orange-2"
+       cx="477.81082"
+       cy="322.40741"
+       r="15" /><circle
+       style="fill:#ff804d;fill-opacity:1;stroke:#d24f4f;stroke-width:0.0322973;paint-order:fill markers stroke"
+       id="circle_orange-9"
+       cx="267.79587"
+       cy="276.85562"
+       r="15" /><circle
+       style="fill:#ff804d;fill-opacity:1;stroke:#d24f4f;stroke-width:0.0315419;paint-order:fill markers stroke"
+       id="circle_orange-6"
+       cx="173.08269"
+       cy="80.826645"
+       r="15" /></g></svg>

web/themes/custom/colloque2024/images/rond_orange.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="26.429976mm"
+   height="26.429976mm"
+   viewBox="0 0 26.429976 26.429976"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-51.525162,-32.699875)">
+    <circle
+       style="fill:#ff804d;fill-opacity:1;stroke:#d24f4f;stroke-width:0.095;paint-order:fill markers stroke"
+       id="circle_orange"
+       cx="64.74015"
+       cy="45.914864"
+       r="65" />
+  </g>
+</svg>

web/themes/custom/colloque2024/images/rond_pop_transition.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="26.429976mm"
+   height="26.429976mm"
+   viewBox="0 0 26.429976 26.429976"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-51.525162,-32.699875)">
+    <circle
+       style="fill:#349a84;fill-opacity:1;stroke:#d24f4f;stroke-width:0.095;paint-order:fill markers stroke"
+       id="circle_pop_trans"
+       cx="64.74015"
+       cy="45.914864"
+       r="65" />
+  </g>
+</svg>

web/themes/custom/colloque2024/images/rond_vertClair_erable.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="26.429976mm"
+   height="26.429976mm"
+   viewBox="0 0 26.429976 26.429976"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-51.525162,-32.699875)">
+    <circle
+       style="fill:#b9ce00;fill-opacity:1;stroke:#b9ce00;stroke-width:0.095;paint-order:fill markers stroke"
+       id="circle_vert_clair_erable"
+       cx="64.74015"
+       cy="45.914864"
+       r="65" />
+  </g>
+</svg>

web/themes/custom/colloque2024/images/rond_vert_erable.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="26.429976mm"
+   height="26.429976mm"
+   viewBox="0 0 26.429976 26.429976"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-51.525162,-32.699875)">
+    <circle
+       style="fill:#038788;fill-opacity:1;stroke:#d24f4f;stroke-width:0.095;paint-order:fill markers stroke"
+       id="cercle_vert_erable"
+       cx="64.74015"
+       cy="45.914864"
+       r="65" />
+  </g>
+</svg>

web/themes/custom/colloque2024/js/animation_home.js

@@ -0,0 +1,21 @@
+// Récupérer la forme SVG
+const circle = document.getElementById('circle_orange');
+console.log(circle);
+
+// Fonction pour animer la forme
+function slideIn() {
+  let translateY = -50; // Position de départ (en bas)
+
+  function animate() {
+    translateY += 1; // Déplacement d'un pixel vers le haut à chaque itération
+    circle.setAttribute('transform', `translate(0, ${translateY})`); // Appliquer la transformation
+
+    if (translateY < 200) { // Limite la hauteur à laquelle la forme doit être animée
+      requestAnimationFrame(animate); // Appel récursif de la fonction animate
+    }
+  }
+
+  animate(); // Lancer l'animation
+}
+
+slideIn(); // Lancer l'animation lorsque la page est chargée