templates/AppTemplates/layout/separator.html.twig line 1

Open in your IDE?
  1. <style>
  2.     .groupe_mrsami {
  3.         position: relative;
  4.         overflow: hidden;
  5.         padding:12px 0;
  6.     }
  8.     .mrsami {
  9.         font-size: 48.5px;
  10.         font-weight: 500;
  11.         transform: translateX(-100%);
  12.         transition: transform 0s ease-in-out, opacity 0.2s ease-in-out;
  13.         transition-delay: 0s; 
  14.         color:#172f6252;
  15.         font-style:italic;
  16.     }
  18.     .mrsami span {
  19.         font-size:inherit;
  20.         font-weight:inherit;
  21.         color:inherit;
  22.     }
  23. </style>
  25. <div class="groupe_mrsami">
  26.     <div class="mrsami">
  27.         {{"VOTRE SÉCURITÉ"|trans}}<span>...</span> {{"EST NOTRE PRIORITÉ"|trans}}
  28.     </div>
  29. </div>
  31. <script>
  32. function animateScroll() {
  33.     var viewportHeight = window.innerHeight;
  34.     var mrsami = document.querySelector('.mrsami');
  35.     var groupe_mrsami = document.querySelector('.groupe_mrsami');
  36.     var rectangle_groupe_mrsami = groupe_mrsami.getBoundingClientRect();
  37.     var scrollProgress = (viewportHeight - (rectangle_groupe_mrsami.top + 100)) / viewportHeight;
  38.     var translateValue = scrollProgress * 100;
  39.     
  40.     // Supprimer la ligne qui modifie l'opacité
  41.     // mrsami.style.opacity = 1 - scrollProgress;
  43.     mrsami.style.transform = `translateX(${translateValue}%)`;
  44.     requestAnimationFrame(animateScroll);
  45. }
  47. // Lancer l'animation
  48. animateScroll();
  49. </script>