dml_frontend/components/MarqueeBanner.vue

<template>
  <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">
      <div class="container">
        <h2 class="pt-4 pb-3">{{ title }}</h2>

        <div class="marquee">
          <div class="marquee-track" :style="`animation-duration: ${speed}s`">
            <ul class="marquee-list">
              <li
                v-for="(item, index) in items"
                :key="index"
                class="marquee-item"
              >
                <NuxtLink v-if="item.link" :to="item.link" class="custLogoLink">
                  <NuxtImg
                    provider="strapi"
                    :src="item.image.url"
                    :alt="item.image.alternativeText || item.text || 'Image'"
                    :title="item.text"
                    width="250"
                    :height="logoHeight"
                    format="webp"
                    loading="lazy"
                    class="custLogo"
                  />
                </NuxtLink>
                <NuxtImg
                  v-else
                  provider="strapi"
                  :src="item.image.url"
                  :alt="item.image.alternativeText || item.text || 'Image'"
                  :title="item.text"
                  width="250"
                  height="50"
                  format="webp"
                  loading="lazy"
                  :class="['custLogo', { greyscale: greyscale }]"

                />
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!-- Wellen unten -->
    <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>
</template>


<script setup>
const runtimeConfig = useRuntimeConfig()
const cmsUrl = computed(() => runtimeConfig.public.cmsBaseUrl)

const props = defineProps({
  items: {
    type: Array,
    required: true,
    default: () => [],
  },
  title: {
    type: String,
    default: '',
  },
  logoHeight: {
    type: [String, Number],
    default: 50 // bisheriger Wert in Pixel
  },
  speed: {
    type: [String, Number],
    default: 20 // bisheriger Wert in Sekunden
  },
  greyscale: {
    type: Boolean,
    default: false,
  }
})

</script>

<style lang="sass" scoped>
.banner-wrapper
  position: relative
  margin: 3rem auto 6rem auto
  svg
    margin: 0


.box
  background-color: $beige
  width: 100%
  min-height: 50px
  margin: -20px auto 0 auto
  padding: 3rem 0
  display: block
  position: relative

  h2
    color: #333
    font-size: 1.2rem
    font-family: 'Mainfont-Bold'
    padding-top: 0rem

.marquee
  overflow: hidden
  width: 100%
  padding: 3rem auto

.marquee-track
  display: flex
  animation: scroll 20s linear infinite
  width: max-content

.marquee-list
  display: flex
  gap: 3rem
  list-style: none
  padding: 1rem 0
  margin: 0

.marquee-item
  flex-shrink: 0

.custLogo
  width: auto
  max-width: 250px
  transition: filter 0.3s ease, transform .5s ease
  &:hover
    transform: scale(1.1)

.greyscale
  filter: grayscale(100%)
  &:hover
    filter: grayscale(0)

@keyframes scroll
  from
    transform: translateX(0)
  to
    transform: translateX(-50%)

.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>