blocks/MarqueeBlock/block.html.twig line 1

Open in your IDE?
  1. {% if data.activado|default == true %}
  2.     <section id="{{ id }}"
  3.              class="{{ className }}{% if className == 'MarqueeBlock alignfull' %} my-10 md:my-16 {% endif %} relative not-prose {% if data.background|default == "primary" %} bg-primary {% elseif data.background|default == "secondary" %} bg-secondary {% elseif data.background|default == "black" %} bg-[#000000] {% elseif data.background|default == "white" %} bg-white {% endif %} border-b border-gray-200/50 overflow-hidden h-auto w-auto py-3 flex items-center">
  4.         <div class="relative flex flex-col lg:flex-row lg:items-center gap-0 lg:gap-8 w-full overflow-hidden justify-center {% if data.efect|default == 'transition' and data.text_align|default == "left" or data.text_align|default == "center" and not data.efect|default == 'motion' %} lg:px-20 px-5 max-w-screen-2xl mx-auto {% endif %}">
  5.             <div class="w-full whitespace-normal flex {% if data.efect|default == 'motion' %} gap-x-8 moving-text {% endif %}">
  6.                 {% set messageIndex = 0 %}
  7.                 {% if data.efect|default == 'transition' %}
  8.                     {% for item in data.mensajes %}
  9.                         <div class="flex items-center gap-2.5 w-full {% if data.efect|default == 'transition' %} marquee-item-transition flex-shrink-0 opacity-0 transition-opacity duration-500 ease-in-out absolute inset-x-0 {% if messageIndex == 0 %} active {% else %} invisible {% endif %} {% elseif data.efect|default == 'motion' %} moving-item {% endif %} {% if data.efect|default == 'transition' and data.text_align|default == "center" %} justify-center text-center flex-wrap {% endif %} relative shrink-0"
  10.                              data-index="{{ messageIndex }}">
  11.                             {% if item.icono|default %}
  12.                                 <img {{ wordpress_image_attrs(item.icono, 'blocks', 'presentation') }}
  13.                                         loading="lazy" class="h-auto w-[24px]">
  14.                             {% endif %}
  15.                             {% if item.texto|default %}
  16.                                 <span class="text-xs lg:text-sm font-title {% if data.background|default == "white" %} text-black {% else %} text-white {% endif %} !leading-snug {% if data.efect|default == 'transition' and data.text_align|default == "center" %} w-auto {% endif %}">{{ item.texto|raw }}</span>
  17.                             {% endif %}
  18.                             {% if item.boton.url|default %}
  19.                                 <a href="{{ item.boton.url }}"
  20.                                    target="{{ item.boton.target }}"
  21.                                    class="absolute inset-0 w-full h-full"></a>
  22.                             {% endif %}
  23.                         </div>
  24.                         {% set messageIndex = messageIndex + 1 %}
  25.                     {% endfor %}
  26.                 {% endif %}
  28.                 {% if data.efect|default == 'motion' %}
  29.                     <div class="swiper">
  30.                         <div class="swiper-wrapper">
  31.                             {% for i in 0..10 %}
  32.                                 {% for item in data.mensajes %}
  33.                                     <div class="swiper-slide mr-8 inline-flex items-center">
  34.                                         {% if item.icono|default %}
  35.                                             <div class="flex-shrink-0 mr-2">
  36.                                                 <img {{ wordpress_image_attrs(item.icono, 'blocks', 'presentation') }}
  37.                                                         loading="lazy"
  38.                                                         class="h-auto w-6">
  39.                                             </div>
  40.                                         {% endif %}
  41.                                         {% if item.texto|default %}
  42.                                             <span class="text-xs lg:text-sm font-title {% if data.background|default == "white" %} text-black {% else %} text-white {% endif %} !leading-snug whitespace-nowrap">
  43.                                         {{ item.texto|raw }}
  44.                                     </span>
  45.                                         {% endif %}
  46.                                         {% if item.boton.url|default %}
  47.                                             <a href="{{ item.boton.url }}"
  48.                                                target="{{ item.boton.target }}"
  49.                                                class="absolute inset-0 w-full h-full z-10">
  50.                                             </a>
  51.                                         {% endif %}
  52.                                     </div>
  53.                                 {% endfor %}
  54.                             {% endfor %}
  55.                         </div>
  56.                     </div>
  57.                 {% endif %}
  58.             </div>
  59.         </div>
  60.     </section>
  61. {% endif %}
  62. <style>
  63.     {{ style|raw }}
  64.     .w-full.whitespace-normal {
  65.         position: relative;
  66.     }
  67.     /*efecto transicion*/
  68.     .marquee-item-transition {
  69.         flex-shrink: 0;
  70.         position: absolute;
  71.         width: 100%;
  72.         left: 0;
  73.         right: 0;
  74.         transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
  75.         transform: translateY(30px);
  76.         opacity: 0;
  77.     }
  79.     .marquee-item-transition.active {
  80.         transform: translateY(0);
  81.         opacity: 1;
  82.         position: relative;
  83.     }
  85.     .marquee-item-transition.prev {
  86.         transform: translateY(-30px);
  87.         opacity: 0;
  88.         position: absolute;
  89.         top: 0;
  90.     }
  92.     /*efecto movimiento*/
  93.     .MarqueeBlock .swiper-wrapper {
  94.         will-change: transform;
  95.         backface-visibility: hidden;
  96.         transform-style: preserve-3d;
  97.     }
  99.     .MarqueeBlock .swiper-slide {
  100.         width: auto !important;
  101.         flex-shrink: 0;
  102.         backface-visibility: hidden;
  103.         transform-style: preserve-3d;
  104.     }
  106.     .marquee span {
  107.         text-align: center;
  108.         white-space: nowrap;
  109.         line-height: 1.2;
  110.     }
  111. </style>