Blog

<style>
:root {
  --color-bg: {{section.settings.colorBackground}};
  --color-bg-accent: {{section.settings.textColor}};
  --size: clamp(10rem, 1rem + 40vmin, 30rem);
  --gap: calc(var(--size) / 14);
  --duration: {{section.settings.speed}}s;
  --scroll-start: 0;
  --scroll-end: calc(-100% - var(--gap));
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: navy;
    --color-bg-accent: {{section.settings.textColor}};
  }
}
.section-{{ section.id }}.custom-marquee-text .marquee {
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
  padding-top: {{section.settings.marquee_padding}}px;
  padding-bottom: {{section.settings.marquee_padding}}px;
  /* mask-image: linear-gradient(
    var(--mask-direction, to right),
    hsl(0 0% 0% / 0),
    hsl(0 0% 0% / 1) 20%,
    hsl(0 0% 0% / 1) 80%,
    hsl(0 0% 0% / 0)
  ); */
}
.section-{{ section.id }}.custom-marquee-text .marquee__group {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: var(--gap);
  min-width: {{section.settings.text_spacing}}%;
  animation: scroll-x var(--duration) linear {% if section.settings.direction == true %}reverse{% endif %} infinite;
}
@media (prefers-reduced-motion: reduce) {
  .section-{{ section.id }}.custom-marquee-text .marquee__group {
    animation-play-state: paused;
  }
}
.section-{{ section.id }}.custom-marquee-text .marquee--reverse .marquee__group {
  animation-delay: -3s;
}
@keyframes scroll-x {
  from {
    transform: translateX(var(--scroll-start));
  }
  to {
    transform: translateX(var(--scroll-end));
  }
}
.section-{{ section.id }}.custom-marquee-text .marquee .marquee-text {
  display: grid;
  place-items: center;
  width: fit-content;
  color: {{section.settings.textColor}};

  border-radius: 0.5rem;
  object-fit: contain;
  font-size: {{ section.settings.marquee_font }}px;
}
.section-{{ section.id }}.custom-marquee-text {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  margin: auto;
  max-width: 100vw;
  background: {{section.settings.colorBackground}};
}
@keyframes fade {
  to {
    opacity: 0;
    visibility: hidden;
  }
}
  
</style>
  <div class="section-{{ section.id }} custom-marquee-text" role="region" {{ block.shopify_attributes }}>
      <div class="marquee">
        <div class="marquee__group">
          {%- for block in section.blocks -%}
            <span class="marquee-text">{{ block.settings.new_text | escape }}</span>
          {%- endfor -%}
        </div>
        <div class="marquee__group">
         {%- for block in section.blocks -%}
            <span class="marquee-text">{{ block.settings.new_text | escape }}</span>
          {%- endfor -%}
        </div>
        <div class="marquee__group">
          {%- for block in section.blocks -%}
            <span class="marquee-text">{{ block.settings.new_text | escape }}</span>
          {%- endfor -%}
        </div>
        <div class="marquee__group">
         {%- for block in section.blocks -%}
            <span class="marquee-text">{{ block.settings.new_text | escape }}</span>
          {%- endfor -%}
        </div>
        <div class="marquee__group">
          {%- for block in section.blocks -%}
            <span class="marquee-text">{{ block.settings.new_text | escape }}</span>
          {%- endfor -%}
        </div>
        <div class="marquee__group">
         {%- for block in section.blocks -%}
            <span class="marquee-text">{{ block.settings.new_text | escape }}</span>
          {%- endfor -%}
        </div>
      </div>
  </div>
{% schema %}
{
  "name": "Marquee Text",
  "settings": [
    {
      "type": "color",
      "id": "colorBackground",
      "label": "Background color",
      "default": "#cd8051"
    },
    {
      "type": "color",
      "id": "textColor",
      "label": "Text color",
      "default": "#ffefd5"
    },
    {
      "type": "checkbox",
      "id": "direction",
      "default": false,
      "label": "Reverse slide"
    },
    {
      "type": "range",
      "id": "marquee_font",
      "min": 8,
      "max": 40,
      "step": 2,
      "default": 18,
      "label": "Font size"
    },
    {
      "type": "range",
      "id": "marquee_padding",
      "min": 0,
      "max": 40,
      "step": 2,
      "default": 4,
      "label": "Padding"
    },
    {
      "type": "range",
      "id": "speed",
      "min": 2,
      "max": 80,
      "step": 1,
      "default": 16,
      "label": "Speed"
    },
    {
      "type": "range",
      "id": "text_spacing",
      "min": 5,
      "max": 100,
      "step": 5,
      "default": 40,
      "label": "Text Spacing"
    }
  ],
  "blocks": [
    {
      "type": "text",
      "name": "Text",
      "limit": 20,
      "settings": [
         {
          "type": "text",
          "id": "new_text",
          "default": "Welcome to store",
          "label": "Text"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Marquee Text",
      "blocks": [
        {
          "type": "text"
        },
        {
          "type": "text"
        },
        {
          "type": "text"
        }
      ]
    }
  ]
}
{% endschema %}