Merge pull request 'Change tech banner animation speed' (#21) from fix(TechBanner) into main
Reviewed-on: #21
This commit was merged in pull request #21.
This commit is contained in:
@@ -70,7 +70,7 @@ layout: hextra-home
|
||||
Les outils et plateformes avec lesquels je travaille
|
||||
</p>
|
||||
</div>
|
||||
{{< tech-banner speed="30s" height="80px" gap="4rem" >}}
|
||||
{{< tech-banner speed="60s" height="80px" gap="4rem" >}}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
@@ -1,31 +1,137 @@
|
||||
{{- $speed := .Get "speed" | default "30s" -}}
|
||||
{{- $gap := .Get "gap" | default "4rem" -}}
|
||||
{{- $height := .Get "height" | default "80px" -}}
|
||||
{{- $speed := .Get "speed" | default "30s" -}} {{- $gap := .Get "gap" | default
|
||||
"4rem" -}} {{- $height := .Get "height" | default "80px" -}}
|
||||
|
||||
<div class="tech-banner-wrapper" style="overflow: hidden; width: 100%; position: relative; margin: 2rem 0;">
|
||||
<div
|
||||
class="tech-banner-wrapper"
|
||||
style="overflow: hidden; width: 100%; position: relative; margin: 2rem 0"
|
||||
>
|
||||
<!-- Gradient overlays for smooth fade effect -->
|
||||
<div style="position: absolute; top: 0; left: 0; width: 150px; height: 100%; background: linear-gradient(to right, var(--color-bg), transparent); z-index: 2; pointer-events: none;"></div>
|
||||
<div style="position: absolute; top: 0; right: 0; width: 150px; height: 100%; background: linear-gradient(to left, var(--color-bg), transparent); z-index: 2; pointer-events: none;"></div>
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 150px;
|
||||
height: 100%;
|
||||
background: linear-gradient(to right, var(--color-bg), transparent);
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
"
|
||||
></div>
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 150px;
|
||||
height: 100%;
|
||||
background: linear-gradient(to left, var(--color-bg), transparent);
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
"
|
||||
></div>
|
||||
|
||||
<!-- Scrolling container -->
|
||||
<div class="tech-banner-scroll" style="display: flex; gap: {{ $gap }}; animation: scroll-left {{ $speed }} linear infinite; will-change: transform;">
|
||||
<div
|
||||
class="tech-banner-scroll"
|
||||
style="display: flex; gap: {{ $gap }}; will-change: transform;"
|
||||
>
|
||||
<!-- First set of logos -->
|
||||
<div style="display: flex; gap: {{ $gap }}; align-items: center; flex-shrink: 0;">
|
||||
<img src="/images/tech-banner/arista-color.svg" alt="Arista" style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;" onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';" onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';" />
|
||||
<img src="/images/tech-banner/aws-color.svg" alt="AWS" style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;" onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';" onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';" />
|
||||
<img src="/images/tech-banner/containerlab-color.svg" alt="ContainerLab" style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;" onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';" onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';" />
|
||||
<img src="/images/tech-banner/k8s-color.svg" alt="Kubernetes" style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;" onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';" onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';" />
|
||||
<img src="/images/tech-banner/nokia-color.svg" alt="Nokia" style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;" onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';" onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';" />
|
||||
<img src="/images/tech-banner/scaleway-color.svg" alt="Scaleway" style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;" onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';" onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';" />
|
||||
<div
|
||||
class="tech-banner-track"
|
||||
style="display: flex; gap: {{ $gap }}; align-items: center; flex-shrink: 0; animation: scroll-left {{ $speed }} linear infinite;"
|
||||
>
|
||||
<img
|
||||
src="/images/tech-banner/arista-color.svg"
|
||||
alt="Arista"
|
||||
style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;"
|
||||
onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';"
|
||||
onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';"
|
||||
/>
|
||||
<img
|
||||
src="/images/tech-banner/aws-color.svg"
|
||||
alt="AWS"
|
||||
style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;"
|
||||
onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';"
|
||||
onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';"
|
||||
/>
|
||||
<img
|
||||
src="/images/tech-banner/containerlab-color.svg"
|
||||
alt="ContainerLab"
|
||||
style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;"
|
||||
onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';"
|
||||
onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';"
|
||||
/>
|
||||
<img
|
||||
src="/images/tech-banner/k8s-color.svg"
|
||||
alt="Kubernetes"
|
||||
style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;"
|
||||
onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';"
|
||||
onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';"
|
||||
/>
|
||||
<img
|
||||
src="/images/tech-banner/nokia-color.svg"
|
||||
alt="Nokia"
|
||||
style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;"
|
||||
onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';"
|
||||
onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';"
|
||||
/>
|
||||
<img
|
||||
src="/images/tech-banner/scaleway-color.svg"
|
||||
alt="Scaleway"
|
||||
style="height: {{ $height }}; width: 200px; object-fit: contain; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;"
|
||||
onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';"
|
||||
onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';"
|
||||
/>
|
||||
</div>
|
||||
<!-- Duplicate set for seamless loop -->
|
||||
<div style="display: flex; gap: {{ $gap }}; align-items: center; flex-shrink: 0;">
|
||||
<img src="/images/tech-banner/arista-color.svg" alt="Arista" style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;" onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';" onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';" />
|
||||
<img src="/images/tech-banner/aws-color.svg" alt="AWS" style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;" onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';" onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';" />
|
||||
<img src="/images/tech-banner/containerlab-color.svg" alt="ContainerLab" style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;" onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';" onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';" />
|
||||
<img src="/images/tech-banner/k8s-color.svg" alt="Kubernetes" style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;" onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';" onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';" />
|
||||
<img src="/images/tech-banner/nokia-color.svg" alt="Nokia" style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;" onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';" onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';" />
|
||||
<img src="/images/tech-banner/scaleway-color.svg" alt="Scaleway" style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;" onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';" onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';" />
|
||||
<div
|
||||
class="tech-banner-track"
|
||||
style="display: flex; gap: {{ $gap }}; align-items: center; flex-shrink: 0; animation: scroll-left {{ $speed }} linear infinite;"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<img
|
||||
src="/images/tech-banner/arista-color.svg"
|
||||
alt="Arista"
|
||||
style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;"
|
||||
onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';"
|
||||
onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';"
|
||||
/>
|
||||
<img
|
||||
src="/images/tech-banner/aws-color.svg"
|
||||
alt="AWS"
|
||||
style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;"
|
||||
onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';"
|
||||
onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';"
|
||||
/>
|
||||
<img
|
||||
src="/images/tech-banner/containerlab-color.svg"
|
||||
alt="ContainerLab"
|
||||
style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;"
|
||||
onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';"
|
||||
onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';"
|
||||
/>
|
||||
<img
|
||||
src="/images/tech-banner/k8s-color.svg"
|
||||
alt="Kubernetes"
|
||||
style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;"
|
||||
onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';"
|
||||
onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';"
|
||||
/>
|
||||
<img
|
||||
src="/images/tech-banner/nokia-color.svg"
|
||||
alt="Nokia"
|
||||
style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;"
|
||||
onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';"
|
||||
onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';"
|
||||
/>
|
||||
<img
|
||||
src="/images/tech-banner/scaleway-color.svg"
|
||||
alt="Scaleway"
|
||||
style="height: {{ $height }}; width: 200px; object-fit: contain; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;"
|
||||
onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';"
|
||||
onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -54,11 +160,15 @@
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-50%);
|
||||
transform: translateX(calc(-100% - {{$gap}}));
|
||||
}
|
||||
}
|
||||
|
||||
.tech-banner-scroll:hover {
|
||||
.tech-banner-track:hover {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
.tech-banner-scroll:hover .tech-banner-track {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user