dml_frontend/components/MarqueeBanner.vue

<template>
    <div>
      <div class="banner-wrapper">
        <!-- Obere Welle -->
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 500 20"
          class="svgwavetop"
          style="transform: scaleY(-1)"
        >
          <g clip-path="url(#_clipPath_5kVoellZ93LI5Lc2i2b27JZsraaBm0XM)">
            <path
              id="wave"
              d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z"
              fill="#EEEBE5"
            />
          </g>
        </svg>
  
        <div class="box pb-5">
          <div class="container">
            <h2 class="pt-4 pb-3">{{ title }}</h2>
  
            <div class="marquee marquee--hover-pause mt-5">
              <!-- Haupt-Liste -->
              <ul class="marquee__content">
                <li v-for="(item, index) in items" :key="index">
                  <NuxtLink v-if="item.link" :to="item.link" class="custLogoLink">
                    <NuxtImg
                      provider="strapi"
                      :src="item.logo.url"
                      :alt="item.logo.alternativeText || 'Logo'"
                      width="250"
                      format="webp"
                      loading="lazy"
                      class="custLogo"
                    />
                  </NuxtLink>
                  <NuxtImg
                    v-else
                    provider="strapi"
                    :src="item.logo.url"
                    :alt="item.logo.alternativeText || 'Logo'"
                    width="250"
                    format="webp"
                    loading="lazy"
                    class="custLogo"
                  />
                </li>
              </ul>
  
              <!-- Duplizierte Liste für Endlos-Scroll -->
              <ul class="marquee__content duplicate" aria-hidden="true">
                <li v-for="(item, index) in items" :key="'dup-' + index">
                  <NuxtLink v-if="item.link" :to="item.link" class="custLogoLink">
                    <NuxtImg
                      provider="strapi"
                      :src="item.logo.url"
                      :alt="item.logo.alternativeText || 'Logo'"
                      width="250"
                      format="webp"
                      loading="lazy"
                      class="custLogo"
                    />
                  </NuxtLink>
                  <NuxtImg
                    v-else
                    provider="strapi"
                    :src="item.logo.url"
                    :alt="item.logo.alternativeText || 'Logo'"
                    width="250"
                    format="webp"
                    loading="lazy"
                    class="custLogo"
                  />
                </li>
              </ul>
            </div>
          </div>
        </div>
  
        <!-- Untere Wellen -->
        <div class="waveBox">
          <div id="waver">
            <div class="waveWrapper waveAnimation">
              <div class="waveWrapperInner bgTop">
                <div
                  class="wave waveTop"
                  :style="{ backgroundImage: `url('${cmsUrl}/uploads/wave_top_8fe067e598.svg')` }"
                />
              </div>
              <div class="waveWrapperInner bgMiddle">
                <div
                  class="wave waveMiddle"
                  :style="{ backgroundImage: `url('${cmsUrl}/uploads/wave_middle_24d8a84a35.svg')` }"
                />
              </div>
              <div class="waveWrapperInner bgBottom">
                <div
                  class="wave waveBottom"
                  :style="{ backgroundImage: `url('${cmsUrl}/uploads/wave_bottom_6fc8184efb.svg')` }"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  
  
  <script setup>
  import { computed } from 'vue'
  
  // Runtime config & base CMS URL
  const runtimeConfig = useRuntimeConfig()
  const cmsUrl = computed(() => runtimeConfig.public.cmsBaseUrl)
  
  // Props
  const props = defineProps({
    items: {
      type: Array,
      required: true,
    },
    logoHeight: {
      type: Number,
      default: 50,
    },
    title: {
      type: String,
      default: '',
    },
    link: {
      type: String,
      default: 'projekt',
    },
  })
  </script>
  
  <style lang="sass">
  .banner-wrapper
    position: relative
    svg
        margin: 0 0 -3px 0
    @media(max-width: $breakPointSM)
        svg
            margin: 0
  .box
    background-color: $beige
    width: 100%
    min-height: 50px
    margin-top: -20px
  
    h2
      color: #333
      font-size: 1.2rem
      font-family: 'Mainfont-Bold'
  
  .marquee
    --gap: 1rem
    position: relative
    display: flex
    overflow: hidden
    user-select: none
    gap: var(--gap)
    ul
      list-style-type: none
    &:hover .marquee__content
      animation-play-state: paused
  
  .marquee__content
    flex-shrink: 0
    display: flex
    justify-content: space-around
    gap: var(--gap)
    min-width: 100%
    animation: scroll 30s linear infinite
    li
      &::before
        display: none
  
  @keyframes scroll
    from
      transform: translateX(0)
    to
      transform: translateX(calc(-100% - var(--gap)))
  
  .custLogo
    width: auto
    max-width: 250px
    height: 50px
    margin: 0 3rem
    filter: grayscale(100%)
    transition: filter 0.3s ease
    &:hover
      filter: grayscale(0)
  
  .waveBox
    position: relative
    height: 120px
    #waver
      display: block
      position: absolute
      left: 0
      height: 120px
      width: 100%
      padding: 0
      margin: 0
  
    @keyframes move_wave
      0%
        transform: translateX(0) translateZ(0) scaleY(1)
      50%
        transform: translateX(-25%) translateZ(0) scaleY(0.55)
      100%
        transform: translateX(-50%) translateZ(0) scaleY(1)
  
    .waveWrapper
      overflow: hidden
      position: absolute
      left: 0
      right: 0
      bottom: 0
      top: 0
      margin: auto
  
    .waveWrapperInner
      position: absolute
      width: 100%
      overflow: hidden
      height: 120px
      top: 0
      background-image: linear-gradient(to top, $beige 20%, $beige 80%)
  
    @media (max-width: 1024px)
      .waveWrapperInner
        height: 50px
  
    .bgTop
      z-index: 15
      opacity: 0.5
  
    .bgMiddle
      z-index: 10
      opacity: 0.75
  
    .bgBottom
      z-index: 5
  
    .wave
      position: absolute
      left: 0
      width: 200%
      height: 100%
      background-repeat: repeat no-repeat
      background-position: 0 bottom
      transform-origin: center bottom
  
    .waveTop
      background-size: auto 100%
      animation: move_wave 18s linear infinite
  
    .waveMiddle
      background-size: auto 100%
      animation: move_wave 11s linear infinite
  
    .waveBottom
      background-size: auto 100%
      animation: move_wave 15s linear infinite
  </style>