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

Open in your IDE?
  1. <style>
  2.     .nouveau_groupe {
  3.         position: relative;
  4.         overflow: hidden;
  5.         padding: 12px 0;
  6.     }
  8.     .nouveau_element {
  9.         font-size: 49px;
  10.         font-weight: 500;
  11.         transform: translateX(-100%);
  12.         transition: transform 0s ease-in-out;
  13.         color: #172f6252;
  14.         font-style: italic;
  15.     }
  17.     .nouveau_element span {
  18.         font-size: inherit;
  19.         font-weight: inherit;
  20.         color: inherit;
  21.     }
  22. </style>
  24. <div class="nouveau_groupe">
  25.     <div class="nouveau_element">
  26.         {{"VOTRE SÉCURITÉ"|trans}}<span>...</span> {{"EST NOTRE PRIORITÉ"|trans}}
  27.     </div>
  28. </div>
  30. <script>
  31. function animateScroll2() {
  32.     var viewportHeight = window.innerHeight;
  33.     var nouveau_element = document.querySelector('.nouveau_element');
  34.     var nouveau_groupe = document.querySelector('.nouveau_groupe');
  35.     var rectangle_nouveau_groupe = nouveau_groupe.getBoundingClientRect();
  36.     var scrollProgress = (viewportHeight - (rectangle_nouveau_groupe.top + 100)) / viewportHeight;
  37.     var translateValue = scrollProgress * 100;
  39.     nouveau_element.style.transform = `translateX(${translateValue}%)`;
  40.     requestAnimationFrame(animateScroll2);
  41. }
  43. // Lancer l'animation
  44. animateScroll2();
  45. </script>