accessability check
This commit is contained in:
parent
fa1f912089
commit
5771bb7cdd
@ -1,149 +1,190 @@
|
||||
<template>
|
||||
<div
|
||||
class="contactBubble"
|
||||
:class="{ active: isContactBubbleOpen }"
|
||||
aria-hidden="false"
|
||||
:aria-expanded="isContactBubbleOpen"
|
||||
aria-labelledby="controlIcon"
|
||||
role="dialog"
|
||||
class="contactBubble"
|
||||
:class="{ active: isContactBubbleOpen }"
|
||||
:aria-hidden="!isContactBubbleOpen"
|
||||
:aria-expanded="isContactBubbleOpen"
|
||||
aria-labelledby="controlIcon"
|
||||
role="dialog"
|
||||
>
|
||||
<svg
|
||||
id="controlIcon"
|
||||
tabindex="0"
|
||||
role="button"
|
||||
aria-label="Toggle contact form"
|
||||
@click="toggleContactBubble"
|
||||
>
|
||||
<use :xlink:href="`/assets/icons/collection.svg#${isContactBubbleOpen ? 'times' : 'talk'}`"/>
|
||||
</svg>
|
||||
<div
|
||||
v-show="isContactBubbleOpen"
|
||||
class="contactContainer"
|
||||
role="form"
|
||||
aria-labelledby="contactTitle"
|
||||
>
|
||||
<div class="row left m-2">
|
||||
<div id="hintBox" class="col-md-6">
|
||||
<NuxtImg
|
||||
v-if="screenWidth <= 768"
|
||||
class="mobileAspBox"
|
||||
:src="companyinfo?.profileImage?.data?.attributes?.url"
|
||||
alt="Sabrina Hennrich"
|
||||
:width="400"
|
||||
format="webp"
|
||||
provider="strapi"
|
||||
loading="lazy"
|
||||
/>
|
||||
<h2 id="contactTitle">{{ $t('contactForm.yourcontact2us') }}</h2>
|
||||
<p class="my-4">
|
||||
<svg aria-hidden="true">
|
||||
<use xlink:href="/assets/icons/collection.svg#phone"/>
|
||||
</svg>
|
||||
<span>{{ companyinfo.phone }}</span>
|
||||
</p>
|
||||
<div v-if="screenWidth > 768" class="pt-3">
|
||||
<h3>{{ $t('contactForm.ourOffice') }}</h3>
|
||||
<p class="address">
|
||||
{{ companyinfo.company }}<br>{{ companyinfo.street }} <br>{{ companyinfo.postalcode }} {{ companyinfo.city }}
|
||||
</p>
|
||||
<p class="aspProf">{{ $t('contactForm.yourcontactperson') }} <b>Sabrina Hennrich</b></p>
|
||||
<div class="aspBox">
|
||||
<NuxtImg
|
||||
:src="companyinfo?.profileImage?.data?.attributes?.url"
|
||||
alt="Ansprechpartner Sabrina Hennrich"
|
||||
:width="150"
|
||||
format="webp"
|
||||
provider="strapi"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<svg
|
||||
id="controlIcon"
|
||||
tabindex="0"
|
||||
role="button"
|
||||
aria-label="Toggle contact form"
|
||||
@click="toggleContactBubble"
|
||||
>
|
||||
<use :xlink:href="`/assets/icons/collection.svg#${isContactBubbleOpen ? 'times' : 'talk'}`" />
|
||||
</svg>
|
||||
|
||||
<div v-if="!formSent">
|
||||
<div class="form-group">
|
||||
<label for="name">{{ $t('contactForm.name') }}</label>
|
||||
<input
|
||||
id="name"
|
||||
v-model="form.name"
|
||||
type="text"
|
||||
name="name"
|
||||
aria-required="true"
|
||||
autocomplete="name"
|
||||
@blur="validateName"
|
||||
>
|
||||
<span v-if="errors.name" class="error">{{ errors.name }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-show="isContactBubbleOpen"
|
||||
class="contactContainer"
|
||||
role="form"
|
||||
aria-labelledby="contactTitle"
|
||||
>
|
||||
<div class="row left m-2">
|
||||
<!-- Linke Seite -->
|
||||
<div id="hintBox" class="col-md-6">
|
||||
<NuxtImg
|
||||
v-if="screenWidth <= 768"
|
||||
class="mobileAspBox"
|
||||
:src="companyinfo?.profileImage?.data?.attributes?.url"
|
||||
alt="Sabrina Hennrich"
|
||||
:width="400"
|
||||
format="webp"
|
||||
provider="strapi"
|
||||
loading="lazy"
|
||||
/>
|
||||
<h2 id="contactTitle">{{ $t('contactForm.yourcontact2us') }}</h2>
|
||||
<p class="my-4">
|
||||
<svg aria-hidden="true">
|
||||
<use xlink:href="/assets/icons/collection.svg#phone" />
|
||||
</svg>
|
||||
<span>{{ companyinfo.phone }}</span>
|
||||
</p>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email">{{ $t('contactForm.email') }}</label>
|
||||
<input
|
||||
id="email"
|
||||
v-model="form.email"
|
||||
type="email"
|
||||
name="email"
|
||||
autocomplete="email"
|
||||
@blur="validateEmail"
|
||||
>
|
||||
<span v-if="errors.email" class="error">{{ errors.email }}</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="phone">{{ $t('contactForm.phone') }}</label>
|
||||
<input
|
||||
id="phone"
|
||||
v-model="form.phone"
|
||||
type="tel"
|
||||
name="phone"
|
||||
autocomplete="tel"
|
||||
@blur="validatePhone"
|
||||
>
|
||||
<span v-if="errors.phone" class="error">{{ errors.phone }}</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="message">{{ $t('contactForm.message') }}</label>
|
||||
<textarea
|
||||
id="message"
|
||||
v-model="form.message"
|
||||
name="message"
|
||||
class="mt-4"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p class="smallText">
|
||||
<span class="check">✔</span>
|
||||
{{ $t('contactForm.privacyInfotextBeforeLink') }}
|
||||
<NuxtLinkLocale
|
||||
:to="getRoute('privacy')"
|
||||
:aria-label="$t('privacy')"
|
||||
>
|
||||
{{ $t('contactForm.privacyInfotextLinkText') }}
|
||||
</NuxtLinkLocale>
|
||||
</p>
|
||||
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
:aria-label="$t('contactForm.sendMessage')"
|
||||
class="pinkBtn"
|
||||
@click="submitForm"
|
||||
>
|
||||
{{ $t('contactForm.sendMessage') }}
|
||||
</button>
|
||||
</div>
|
||||
<div v-else class="mt-5 thx">
|
||||
<h3 class="pt-5">{{ $t('contactForm.confirmation.thx') }}</h3>
|
||||
<p>{{ $t('contactForm.confirmation.info') }}</p>
|
||||
<p>{{ $t('contactForm.confirmation.salutation') }}</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div v-if="screenWidth > 768" class="pt-3">
|
||||
<h3>{{ $t('contactForm.ourOffice') }}</h3>
|
||||
<p class="address">
|
||||
{{ companyinfo.company }}<br />
|
||||
{{ companyinfo.street }} <br />
|
||||
{{ companyinfo.postalcode }} {{ companyinfo.city }}
|
||||
</p>
|
||||
<p class="aspProf">{{ $t('contactForm.yourcontactperson') }} <b>Sabrina Hennrich</b></p>
|
||||
<div class="aspBox">
|
||||
<NuxtImg
|
||||
:src="companyinfo?.profileImage?.data?.attributes?.url"
|
||||
alt="Ansprechpartner Sabrina Hennrich"
|
||||
:width="150"
|
||||
format="webp"
|
||||
provider="strapi"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Rechte Seite -->
|
||||
<div class="col-md-6">
|
||||
<div v-if="!formSent">
|
||||
<form @submit.prevent="submitForm" novalidate>
|
||||
<div class="form-group">
|
||||
<label for="name">{{ $t('contactForm.name') }}</label>
|
||||
<input
|
||||
id="name"
|
||||
class="form-control"
|
||||
v-model="form.name"
|
||||
type="text"
|
||||
name="name"
|
||||
required
|
||||
autocomplete="name"
|
||||
@blur="validateName"
|
||||
:aria-invalid="!!errors.name"
|
||||
:aria-describedby="errors.name ? 'error-name' : null"
|
||||
/>
|
||||
<span
|
||||
v-if="errors.name"
|
||||
id="error-name"
|
||||
class="error"
|
||||
role="alert"
|
||||
>
|
||||
{{ errors.name }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email">{{ $t('contactForm.email') }}</label>
|
||||
<input
|
||||
id="email"
|
||||
class="form-control"
|
||||
v-model="form.email"
|
||||
type="email"
|
||||
name="email"
|
||||
required
|
||||
autocomplete="email"
|
||||
@blur="validateEmail"
|
||||
:aria-invalid="!!errors.email"
|
||||
:aria-describedby="errors.email ? 'error-email' : null"
|
||||
/>
|
||||
<span
|
||||
v-if="errors.email"
|
||||
id="error-email"
|
||||
class="error"
|
||||
role="alert"
|
||||
>
|
||||
{{ errors.email }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="phone">{{ $t('contactForm.phone') }}</label>
|
||||
<input
|
||||
id="phone"
|
||||
class="form-control"
|
||||
v-model="form.phone"
|
||||
type="tel"
|
||||
name="phone"
|
||||
autocomplete="tel"
|
||||
@blur="validatePhone"
|
||||
:aria-invalid="!!errors.phone"
|
||||
:aria-describedby="errors.phone ? 'error-phone' : null"
|
||||
/>
|
||||
<span
|
||||
v-if="errors.phone"
|
||||
id="error-phone"
|
||||
class="error"
|
||||
role="alert"
|
||||
>
|
||||
{{ errors.phone }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="message">{{ $t('contactForm.message') }}</label>
|
||||
<textarea
|
||||
id="message"
|
||||
class="form-control mt-4"
|
||||
v-model="form.message"
|
||||
name="message"
|
||||
rows="4"
|
||||
required
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<p class="smallText">
|
||||
<span class="check">✔</span>
|
||||
{{ $t('contactForm.privacyInfotextBeforeLink') }}
|
||||
<NuxtLinkLocale
|
||||
:to="getRoute('privacy')"
|
||||
:aria-label="$t('privacy')"
|
||||
>
|
||||
{{ $t('contactForm.privacyInfotextLinkText') }}
|
||||
</NuxtLinkLocale>
|
||||
</p>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="pinkBtn"
|
||||
:aria-label="$t('contactForm.sendMessage')"
|
||||
>
|
||||
{{ $t('contactForm.sendMessage') }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Dankeschön-Text -->
|
||||
<div v-else class="mt-5 thx">
|
||||
<h3 class="pt-5">{{ $t('contactForm.confirmation.thx') }}</h3>
|
||||
<p>{{ $t('contactForm.confirmation.info') }}</p>
|
||||
<p>{{ $t('contactForm.confirmation.salutation') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useMainStore } from '@/stores/main';
|
||||
|
||||
@ -1,272 +1,232 @@
|
||||
<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="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="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>
|
||||
<div class="marquee">
|
||||
<div class="marquee-track">
|
||||
<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
|
||||
v-else
|
||||
provider="strapi"
|
||||
:src="item.logo.url"
|
||||
:alt="item.logo.alternativeText || 'Logo'"
|
||||
width="250"
|
||||
height="50"
|
||||
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')` }"
|
||||
</NuxtLink>
|
||||
<NuxtImg
|
||||
v-else
|
||||
provider="strapi"
|
||||
:src="item.logo.url"
|
||||
:alt="item.logo.alternativeText || 'Logo'"
|
||||
width="250"
|
||||
height="50"
|
||||
format="webp"
|
||||
loading="lazy"
|
||||
class="custLogo"
|
||||
/>
|
||||
</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>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 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)
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
const props = defineProps({
|
||||
items: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
// 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
|
||||
<style lang="sass" scoped>
|
||||
.banner-wrapper
|
||||
position: relative
|
||||
svg
|
||||
margin: 0 0 -3px 0
|
||||
@media(max-width: $breakPointSM)
|
||||
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)
|
||||
.box
|
||||
background-color: $beige
|
||||
width: 100%
|
||||
min-height: 50px
|
||||
margin-top: -20px
|
||||
|
||||
.waveWrapper
|
||||
overflow: hidden
|
||||
position: absolute
|
||||
left: 0
|
||||
right: 0
|
||||
bottom: 0
|
||||
top: 0
|
||||
margin: auto
|
||||
h2
|
||||
color: #333
|
||||
font-size: 1.2rem
|
||||
font-family: 'Mainfont-Bold'
|
||||
|
||||
.waveWrapperInner
|
||||
position: absolute
|
||||
width: 100%
|
||||
overflow: hidden
|
||||
height: 120px
|
||||
top: 0
|
||||
background-image: linear-gradient(to top, $beige 20%, $beige 80%)
|
||||
.marquee
|
||||
overflow: hidden
|
||||
width: 100%
|
||||
|
||||
@media (max-width: 1024px)
|
||||
.waveWrapperInner
|
||||
height: 50px
|
||||
.marquee-track
|
||||
display: flex
|
||||
animation: scroll 20s linear infinite
|
||||
width: max-content
|
||||
|
||||
.bgTop
|
||||
z-index: 15
|
||||
opacity: 0.5
|
||||
.marquee-list
|
||||
display: flex
|
||||
gap: 3rem
|
||||
list-style: none
|
||||
padding: 1rem 0
|
||||
margin: 0
|
||||
|
||||
.bgMiddle
|
||||
z-index: 10
|
||||
opacity: 0.75
|
||||
.marquee-item
|
||||
flex-shrink: 0
|
||||
|
||||
.bgBottom
|
||||
z-index: 5
|
||||
.custLogo
|
||||
width: auto
|
||||
max-width: 250px
|
||||
height: 50px
|
||||
filter: grayscale(100%)
|
||||
transition: filter 0.3s ease
|
||||
&:hover
|
||||
filter: grayscale(0)
|
||||
|
||||
.wave
|
||||
position: absolute
|
||||
left: 0
|
||||
width: 200%
|
||||
height: 100%
|
||||
background-repeat: repeat no-repeat
|
||||
background-position: 0 bottom
|
||||
transform-origin: center bottom
|
||||
@keyframes scroll
|
||||
from
|
||||
transform: translateX(0)
|
||||
to
|
||||
transform: translateX(-50%)
|
||||
|
||||
.waveTop
|
||||
background-size: auto 100%
|
||||
animation: move_wave 18s linear infinite
|
||||
.waveBox
|
||||
position: relative
|
||||
height: 120px
|
||||
|
||||
.waveMiddle
|
||||
background-size: auto 100%
|
||||
animation: move_wave 11s linear infinite
|
||||
#waver
|
||||
display: block
|
||||
position: absolute
|
||||
left: 0
|
||||
height: 120px
|
||||
width: 100%
|
||||
padding: 0
|
||||
margin: 0
|
||||
|
||||
.waveBottom
|
||||
background-size: auto 100%
|
||||
animation: move_wave 15s linear infinite
|
||||
</style>
|
||||
@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>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 198 KiB |
Loading…
x
Reference in New Issue
Block a user