Flipus: Eine interaktive Galerie mit Hover-Effekt

Flipus ist eine einfache, aber elegante Galerie-Lösung, die auf einem interaktiven Hover-Effekt basiert. Sie eignet sich ideal für Websites, die Bilder oder Profile in einer ansprechenden und benutzerfreundlichen Art und Weise darstellen möchten. In diesem Blogbeitrag zeige ich dir, wie du Flipus ganz einfach in dein Projekt integrieren kannst.

• Flipus: Eine interaktive Galerie mit Hover-Effekt
  • 🎨 Was ist Flipus?
  • 🛠️ Wie wird Flipus eingebaut?
  • 😎 CSS und JavaScript einbinden
  • 🖼️ Beispielstruktur
  • 📲 Responsive Design
  • 💡 Funktionsweise des Hover-Effekts
  • ⚙️ Anpassung und Erweiterung
  • 🌍 Demo ansehen
  • 📄 Lizenz
  • 👨‍💻 Fazit

🎨 Was ist Flipus?

Flipus ist eine Bildergalerie, die auf einer CSS-basierten Hover-Transformation basiert. Wenn der Benutzer mit der Maus über ein Bild fährt, wird es vergrößert und erhält einen stilvollen Zoom-Effekt. Flipus ist dabei leichtgewichtig und benötigt keine zusätzlichen JavaScript-Frameworks. Es funktioniert hervorragend für Projekte, die eine einfache und elegante Präsentation von Bildern oder Profilen benötigen.

🛠️ Wie wird Flipus eingebaut?

Die Installation und Integration von Flipus in deine Website ist sehr einfach. Du musst lediglich zwei Dinge tun:

😎 CSS und JavaScript einbinden

Lade die nötigen Dateien von einem CDN und binde sie in dein HTML ein:

<!-- CSS einbinden -->
<link rel="stylesheet" href="https://cdn.codespielwiese.net/script/flipus/v0.1.0/flipus.min.css">

<!-- JavaScript einbinden -->
<script src="https://cdn.codespielwiese.net/script/flipus/v0.1.0/flipus.min.js"></script>

JavaScript Initialisierung Nach dem Einbinden der Dateien, musst du das Skript mit einem einfachen Aufruf aktivieren. Achte darauf, dass du die ID des Containers angibst, der die Galerie enthält:

<script>initFlipus("#flipus");</script>

🖼️ Beispielstruktur

Der HTML-Code für die Galerie könnte wie folgt aussehen:

<!-- Container -->
<div id="flipus">

  <!-- Item 1 -->
  <div class="flipus-container">
    <img src="img/01_image.webp" alt="Benny" />
    <span>
      <h2>Benny</h2>
      <p>Hier kommt eine kurze Beschreibung von Benny.</p>
    </span>
  </div>

  <!-- Item 2 -->
  <div class="flipus-container">
    <img src="img/02_image.webp" alt="Lucy" />
    <span>
      <h2>Lucy</h2>
      <p>Hier kommt eine kurze Beschreibung von Lucy.</p>
    </span>
  </div>

  <!-- Weitere Items hinzufügen -->

</div>

In diesem Beispiel enthält die Galerie mehrere flipus-container-Elemente, die jeweils ein Bild und einen Textbereich mit Titel und Beschreibung enthalten. Du kannst beliebig viele dieser Container hinzufügen, je nachdem, wie viele Bilder du anzeigen möchtest.

📲 Responsive Design

Flipus funktioniert auf allen Geräten, da es auf eine responsive Darstellung ausgelegt ist. Bei mobilen Geräten oder kleineren Bildschirmen wird der Hover-Effekt automatisch deaktiviert, um die Benutzererfahrung zu verbessern. Auf größeren Bildschirmen (ab 1024px) wird der Hover-Effekt wieder aktiviert, sodass deine Galerie in jeder Situation optimal angezeigt wird.

💡 Funktionsweise des Hover-Effekts

Der Hover-Effekt von Flipus sorgt dafür, dass das aktuelle Bild beim Überfahren vergrößert wird, während die anderen Bilder leicht gekippt und reduziert werden.

• Hover über das Bild: Das Bild wird skaliert und erhält einen stilvollen Zoom-Effekt.

• Hover über andere Bilder: Diese Bilder werden in eine leicht schräg geneigte Position verschoben, sodass der Benutzer klar erkennen kann, welches Bild aktiv ist.

• Verlassen des Bildes: Alle Bilder kehren in ihren ursprünglichen Zustand zurück.

⚙️ Anpassung und Erweiterung

Du kannst das Verhalten und Design von Flipus leicht anpassen:

• CSS-Anpassungen: Du kannst das Aussehen der Galerie ändern, indem du die CSS-Datei bearbeitest oder überschreibst.

• JavaScript-Funktionen: Wenn du zusätzliche Funktionen benötigst (z. B. das Hinzufügen von Animationen oder das Einbinden von Lazy Loading), kannst du das bestehende JavaScript erweitern.

🌍 Demo ansehen

Schau dir die Demo der Flipus-Galerie an, um zu sehen, wie der Effekt in Aktion funktioniert!

📄 Lizenz

Flipus steht unter der MIT-Lizenz, was bedeutet, dass du es kostenlos verwenden, modifizieren und in deinen eigenen Projekten einsetzen kannst.

👨‍💻 Fazit

Flipus ist eine einfache, aber leistungsstarke Lösung, um deine Bildergalerie mit einem modernen Hover-Effekt auszustatten. Sie eignet sich perfekt für alle, die eine ansprechende, benutzerfreundliche Galerie benötigen, ohne auf komplexe Lösungen oder Frameworks zurückgreifen zu müssen.

Wenn du weitere Fragen hast oder Unterstützung benötigst, kannst du gerne auf GitHub nachsehen oder dich an mich wenden. Viel Spaß beim Implementieren von Flipus!