92 lines
2.3 KiB
HTML
92 lines
2.3 KiB
HTML
<section class="border-y border-gray-100 overflow-hidden">
|
|
<div class="container mx-auto">
|
|
<div class="py-12">
|
|
<p class="text-center text-3xl md:text-2xl font-bold mb-6">{{ .Get "title" | default (i18n
|
|
"trustedByCompanies") }}</p>
|
|
{{ $shouldAnimate := ne (.Get "animate") "false" }}
|
|
<div class="logo-scroll{{if not $shouldAnimate}} static{{end}}">
|
|
<div class="logos-slide{{if $shouldAnimate}} animate{{end}}">
|
|
{{ range .Page.Params.client_logos }}
|
|
<img src="{{ .logo | relURL }}" alt="{{ .name }}" />
|
|
{{ end }}
|
|
{{ if $shouldAnimate }}
|
|
{{ range .Page.Params.client_logos }}
|
|
<img src="{{ .logo | relURL }}" alt="" aria-hidden="true" loading="lazy" />
|
|
{{ end }}
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
.logo-scroll {
|
|
overflow: hidden;
|
|
padding: 20px 0;
|
|
white-space: nowrap;
|
|
position: relative;
|
|
}
|
|
|
|
.logo-scroll.static {
|
|
display: flex;
|
|
justify-content: center;
|
|
overflow: visible;
|
|
}
|
|
|
|
.logo-scroll.static .logos-slide {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
gap: 40px;
|
|
}
|
|
|
|
.logos-slide {
|
|
display: flex;
|
|
align-items: center;
|
|
width: max-content;
|
|
}
|
|
|
|
.logos-slide.animate {
|
|
animation: 24s slide infinite linear;
|
|
}
|
|
|
|
|
|
.logos-slide img {
|
|
max-height: 7rem;
|
|
width: auto;
|
|
margin: 0 40px;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
/* filter: grayscale(100%); */
|
|
/* opacity: 0.6; */
|
|
}
|
|
|
|
.logo-scroll.static .logos-slide img {
|
|
margin: 0;
|
|
height: 7rem;
|
|
width: auto;
|
|
object-fit: contain;
|
|
}
|
|
|
|
@keyframes slide {
|
|
from {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
to {
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
|
|
.logo-scroll:hover .logos-slide.animate {
|
|
animation-play-state: paused;
|
|
}
|
|
|
|
/* Mobile-specific animation speed */
|
|
@media (max-width: 768px) {
|
|
.logos-slide.animate {
|
|
animation: 16s slide infinite linear;
|
|
}
|
|
}
|
|
</style> |