templates/front/_common/_marquee.html.twig line 1

Open in your IDE?
  1.   <style>
  2. :root {
  3.   --marquee-width: 100%;
  4.   --marquee-elements-displayed: {{ displayed.xs }};
  5.   --marquee-element-width: calc((var(--marquee-width) ) / var(--marquee-elements-displayed));
  6.   --marquee-animation-duration: calc(var(--marquee-elements) * {{ speed }}s);
  7. }
  9. .marquee {
  10.   width: var(--marquee-width);
  11.   color: #eee;
  12.   overflow: hidden;
  13.   position: relative;
  14. }
  16. .marquee-content {
  17.   margin: 0;
  18.   padding: 0;
  19.   list-style: none;
  20.   height: 100%;
  21.   display: flex;
  22.   animation: scrolling var(--marquee-animation-duration) linear infinite;
  23. }
  24.  .marquee-content:hover {
  25.   animation-play-state: paused;
  26. } 
  27. @keyframes scrolling {
  28.   0% { transform: translateX(0); }
  29.   100% { transform: translateX(calc(-1 * var(--marquee-element-width) * var(--marquee-elements))); }
  30. }
  31. .marquee-content li {
  32.   display: flex;
  33.   justify-content: center;
  34.   align-items: center;
  35.   flex-shrink: 0;
  36.   width: var(--marquee-element-width);
  37.   max-height: 100%;
  38.   white-space: nowrap;
  39. }
  40. .marquee-content li div {
  41.     display: block;
  42.     border-left: 1px solid transparent;
  43.     border-right: 1px solid #ccc;
  44.     padding: 0 20%;
  45.     width: 100%;
  46.     text-align: center;
  47. }
  49. @media (min-width: 576px) {
  50.   :root {
  51.     --marquee-elements-displayed: {{ displayed.sm }};
  52.   }
  53. }
  54. @media (min-width: 768px) {
  55.   :root {
  56.     --marquee-elements-displayed: {{ displayed.md }};
  57.   }
  58. }
  59. @media (min-width: 992px) {
  60.   :root {
  61.     --marquee-elements-displayed: {{ displayed.lg }};
  62.   }
  63. }
  64. @media (min-width: 1200px) {
  65.   :root {
  66.     --marquee-elements-displayed: {{ displayed.xl }};
  67.   }
  68. }
  69. @media (min-width: 1400px) {
  70.   :root {
  71.     --marquee-elements-displayed: {{ displayed.xxl }};
  72.   }
  73. }
  74. </style>
  75. <div class="marquee">
  76.   <ul class="marquee-content">
  77.       {% for url,image in partenaires %}
  78.           <li>
  79.             <div>
  80.             {% if url != '' %}
  81.               <a href="{{ url }}" target="_blank"><img class="img-fluid" src="{{ asset('assets/media/accueil/partenaires_2/' ~ image) }}" /></a>
  82.             {% else%}
  83.               <img class="img-fluid" src="{{ asset('assets/media/accueil/partenaires_2/' ~ image) }}" />
  84.             {% endif %}
  85.             </div>
  86.           </li>
  87.       {% endfor %}
  88.   </ul>
  89. </div>
  90. <script>
  91.   const root = document.documentElement;
  92.   const marqueeElementsDisplayed = getComputedStyle(root).getPropertyValue("--marquee-elements-displayed");
  93.   const marqueeContent = document.querySelector(".marquee-content");
  95.   root.style.setProperty("--marquee-elements", marqueeContent.children.length);
  97.   for(let i=0; i<marqueeElementsDisplayed; i++) {
  98.     marqueeContent.appendChild(marqueeContent.children[i].cloneNode(true));
  99.   }
  100. </script>