Blog

<style>
.section-{{ section.id }}.custom-marquee-images {
  --color-bg: {{section.settings.colorBackground}};
  --color-bg-accent: {{section.settings.logoColorBackground}};
  --size: clamp(10rem, 1rem + 40vmin, 30rem);
  --gap: {{ section.settings.logo_spacing }}px;
  --duration: {{section.settings.speed}}s;
  --scroll-start: 0;
  --scroll-end: calc(-100% - var(--gap));

  display: flex;
  flex-direction: column;
  gap: var(--gap);
  margin: auto;
  max-width: 100vw;
  background: {{section.settings.colorBackground}};
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: navy;
    --color-bg-accent: {{section.settings.logoColorBackground}};
  }
}
.section-{{ section.id }}.custom-marquee-images .marquee {
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
  padding-top: 10px;
  padding-bottom: 10px;
  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-images .marquee__group {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: var(--gap);
  min-width: 100%;
  animation: scroll-x var(--duration) linear {% if section.settings.direction == true %}reverse{% endif %} infinite;
}
@media (prefers-reduced-motion: reduce) {
  .section-{{ section.id }}.custom-marquee-images .marquee__group {
    animation-play-state: paused;
  }
}
@keyframes scroll-x {
  from {
    transform: translateX(var(--scroll-start));
  }
  to {
    transform: translateX(var(--scroll-end));
  }
}
.section-{{ section.id }}.custom-marquee-images .marquee img {
  display: grid;
  place-items: center;
  width: {{section.settings.image_width}}px;
  background: {{section.settings.logoColorBackground}};
  aspect-ratio: 16/9;
  padding: {{section.settings.marquee_padding}}px;
  border-radius: 0.5rem;
  object-fit: contain;
}
.section-{{ section.id }}.custom-marquee-images {
  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-images" role="region" {{ block.shopify_attributes }}>
      <div class="marquee">
        <div class="marquee__group">
          {%- for block in section.blocks -%}
            <img src="{{ block.settings.image | image_url: width: 533 }}" />
          {%- endfor -%}
        </div>
        <div class="marquee__group">
          {%- for block in section.blocks -%}
            <img loading="eager" alt="" class="logo" src="{{ block.settings.image | image_url: width: 533 }}" />
          {%- endfor -%}
        </div>
      </div>
  </div>
{% schema %}
{
  "name": "Marquee Images",
  "settings": [
    {
      "type": "color",
      "id": "colorBackground",
      "label": "Background color",
      "default": "#cd8051"
    },
    {
      "type": "color",
      "id": "logoColorBackground",
      "label": "Logo Background color",
      "default": "#ffffff"
    },
    {
      "type": "checkbox",
      "id": "direction",
      "default": false,
      "label": "Reverse slide"
    },
    {
      "type": "range",
      "id": "marquee_height",
      "min": 24,
      "max": 200,
      "step": 2,
      "default": 100,
      "label": "Marquee height"
    },
    {
      "type": "range",
      "id": "marquee_padding",
      "min": 0,
      "max": 100,
      "step": 2,
      "default": 0,
      "label": "Marquee padding"
    },
    {
      "type": "range",
      "id": "image_width",
      "min": 10,
      "max": 500,
      "step": 10,
      "default": 200,
      "label": "Image size"
    },
    {
      "type": "range",
      "id": "speed",
      "min": 2,
      "max": 80,
      "step": 1,
      "default": 16,
      "label": "Speed"
    },
    {
    "type": "range",
    "id": "logo_spacing",
    "min": 0,
    "max": 100,
    "step": 2,
    "default": 20,
    "unit": "px",
    "label": "Logo spacing"
    }
  ],
  "blocks": [
    {
      "type": "image_picker",
      "name": "Logo",
      "limit": 20,
      "settings": [
         {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Marquee Images",
      "blocks": [
        {
          "type": "image_picker"
        },
        {
          "type": "image_picker"
        },
        {
          "type": "image_picker"
        }
      ]
    }
  ]
}
{% endschema %}