Implemented Carousel logic

2026-01-03 18:06:18 +02:00
parent 9415c99e15
commit b7d6fe8f40
34 changed files with 1153 additions and 0 deletions
@@ -0,0 +1,95 @@
+@using System.Timers
+@using Frontend.Libs.Generic.Carousel.Components
+
+
+<div class="relative w-screen h-screen overflow-hidden bg-black">
+    @if (Items != null && Items.Any())
+    {
+        var currentItem = Items[CurrentIndex];
+        var isEven = CurrentIndex % 2 == 0;
+
+        <!-- Background Image with Zoom Animation -->
+        <div key="@CurrentIndex"
+            class="absolute inset-0 w-full h-full bg-cover bg-center transition-transform duration-[3000ms] ease-in-out transform @(isEven ? "scale-110" : "scale-100")"
+            style="background-image: url('@currentItem.ImageUrl');">
+        </div>
+
+        <!-- Overlay Content -->
+        <div class="absolute inset-0 flex items-center justify-center z-10 bg-black/30">
+            <div class="text-center text-white">
+                <!-- Typing Text Animation -->
+                <h1
+                    class="text-5xl font-mono mb-4 overflow-hidden whitespace-nowrap border-r-4 border-white animate-typing">
+                    @_displayedText
+                </h1>
+
+                <!-- Expanding Underline -->
+                <div
+                    class="h-1 bg-white mx-auto transition-all duration-[2000ms] ease-out @(_underlineExpanded ? "w-full" : "w-0")">
+                </div>
+            </div>
+        </div>
+    }
+</div>
+
+@code {
+    [Parameter] public List<CarouselItem> Items { get; set; } = new();
+    [Parameter] public int DurationSeconds { get; set; } = 3;
+
+    private int CurrentIndex { get; set; } = 0;
+    private string _displayedText = "";
+    private bool _underlineExpanded = false;
+    private Timer? _timer;
+
+    protected override void OnInitialized()
+    {
+        if (Items.Any())
+        {
+            StartSlideTimer();
+            StartAnimationSequence(Items[CurrentIndex].Text);
+        }
+    }
+
+    private void StartSlideTimer()
+    {
+        _timer = new Timer(DurationSeconds * 1000);
+        _timer.Elapsed += OnSlideTimerElapsed;
+        _timer.AutoReset = true;
+        _timer.Start();
+    }
+
+    private void OnSlideTimerElapsed(object? sender, ElapsedEventArgs e)
+    {
+        InvokeAsync(() =>
+        {
+            CurrentIndex = (CurrentIndex + 1) % Items.Count;
+            StartAnimationSequence(Items[CurrentIndex].Text);
+            StateHasChanged();
+        });
+    }
+
+    private async void StartAnimationSequence(string text)
+    {
+        // Reset state
+        _displayedText = "";
+        _underlineExpanded = false;
+        StateHasChanged();
+
+        // Typing Effect
+        foreach (var c in text)
+        {
+            _displayedText += c;
+            StateHasChanged();
+            await Task.Delay(50); // Typing speed
+        }
+
+        // Expand Underline
+        _underlineExpanded = true;
+        StateHasChanged();
+    }
+
+    public void Dispose()
+    {
+        _timer?.Dispose();
+    }
+}
@@ -0,0 +1,7 @@
+namespace Frontend.Libs.Generic.Carousel.Components;
+
+public class CarouselItem
+{
+    public string ImageUrl { get; set; } = string.Empty;
+    public string Text { get; set; } = string.Empty;
+}