Dieser Heldenabschnitt hat eine starke visuelle Wirkung, da im Hintergrund ein sich wiederholendes Video platziert ist. Durch das Abspielen eines Markenimagevideos oder Produktdemovideos im Hintergrund können Sie die Aufmerksamkeit der Nutzer stark auf sich ziehen.

Vorschau

Discover the New Digital Experience

Take your business to the next stage with the latest technology and sophisticated design. Let’s create the future together.

Get Started

Watch Demo

Anwendungsfälle und Funktionen

Produkt-Landingpage: Vermitteln Sie Wert intuitiv, indem Sie das tatsächliche Produkt im Hintergrund in Aktion zeigen.
Unternehmenswebsite: Schaffen Sie einen professionellen Eindruck mit filmischen Bildern, die die Atmosphäre Ihrer Marke vermitteln.
Seite zur Veranstaltungsankündigung: Vermitteln Sie die Spannung und Spannung vergangener Veranstaltungen und steigern Sie die Motivation zur Teilnahme.
Funktionen:
- Durch die Verwendung von „object-cover“ reagiert das Video, sodass es unabhängig von der Bildschirmgröße den gesamten Hintergrund abdeckt.
- Über dem Video wird ein durchscheinendes schwarzes Overlay („bg-black/50“) platziert, um die Sichtbarkeit des Textes zu gewährleisten.
- Durch Angabe des Attributs „playsinline“ wird das Spiel auch auf iOS-Geräten inline als Hintergrund statt im Vollbildmodus gespielt.

Kernpunkte von Design und UX (Design & UX)

Kontrast sicherstellen: Da sich die Helligkeit von Videos ändert, ist es wichtig, die Deckkraft des Overlays anzupassen, damit der Text immer lesbar ist.
Berücksichtigung der Ladegeschwindigkeit: Videodateien sind in der Regel umfangreich. Wir empfehlen Ihnen, eine MP4-Datei mit geringerer Kapazität vorzubereiten (am besten auch WebM verwenden) und zusätzlich ein Posterbild (Attribut „poster“) festzulegen.
Animationen: Fügen Sie Einblend-Animationen zu Inhaltselementen hinzu, um beim Laden der Seite ein umfassendes Erlebnis zu bieten.

So passen Sie es an (Anpassungsanleitung)

Ändern Sie die Overlay-Dichte: Wenn Sie „bg-black/50“ von „
“ auf „bg-black/70“ setzen, wird es dunkler, und wenn Sie „bg-black/30“ einstellen, wird es heller.
Färben Sie das Overlay: Sie können das Overlay auch farbig gestalten, damit es zu Ihrer Markenfarbe passt, z. B. „bg-blue-900/60“.
Höhe anpassen: Sie können die Höhe des Abschnitts steuern, indem Sie „h-[600px]“ in „h-screen“ (Vollbild) oder „min-h-[80vh]“ usw. ändern.

Implementierungscode (Implementation)

<section class="relative h-screen min-h-[600px] w-full flex items-center justify-center overflow-hidden font-sans">

<!-- Video background -->
<video
  autoplay
  loop
  muted
  playsinline
  poster="/assets/video-poster.jpg"
  class="absolute z-0 w-auto min-w-full min-h-full max-w-none object-cover"
>
  <source src="/assets/hero-background.mp4" type="video/mp4" />
  <source src="/assets/hero-background.webm" type="video/webm" />
  Your browser does not support the video tag.
</video>

<!-- Overlay (dark layer to improve visibility) -->
<div class="absolute inset-0 z-10 bg-black/60"></div>

<!-- Content -->
<div class="relative z-20 max-w-4xl mx-auto px-6 text-center text-white">
  <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold tracking-tight leading-tight mb-6 animate-fade-in-up">
    Discover the New <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-emerald-400">Digital Experience</span>
  </h1>
  <p class="text-lg sm:text-xl md:text-2xl text-gray-200 mb-10 max-w-2xl mx-auto opacity-0 animate-fade-in-up animation-delay-200">
    Take your business to the next stage with the latest technology and sophisticated design. Let's create the future together.
  </p>
  <div class="flex flex-col sm:flex-row items-center justify-center gap-4 opacity-0 animate-fade-in-up animation-delay-400">
    <a href="#" class="w-full sm:w-auto px-8 py-4 bg-white text-gray-900 font-bold rounded-full hover:bg-gray-100 transition-colors duration-300 shadow-lg hover:shadow-xl text-lg">
      Get Started
    </a>
    <a href="#" class="w-full sm:w-auto px-8 py-4 bg-white/10 backdrop-blur-md text-white border border-white/30 font-bold rounded-full hover:bg-white/20 transition-colors duration-300 text-lg flex items-center justify-center gap-2">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
      Watch Demo
    </a>
  </div>
</div>
</section>

<!-- 
* When using Tailwind CSS, you need to add an animation class for fade-in-up to 
tailwind.config.js or define it in your custom CSS.

CSS Example:
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up {
animation: fadeInUp 0.8s ease-out forwards;
}
.animation-delay-200 { animation-delay: 0.2s; }
.animation-delay-400 { animation-delay: 0.4s; }
-->

Browser-Unterstützung

Funktioniert gut mit den neuesten Versionen moderner Browser (Chrome, Firefox, Safari, Edge).
Durch Hinzufügen des Attributs „playsinline“ wird es automatisch inline auf der iOS-Version von Safari abgespielt.
Autoplay kann blockiert werden, wenn der „Energiesparmodus“ von iOS aktiviert ist oder die Kommunikationsumgebung schlecht ist. Stellen Sie daher unbedingt ein alternatives Bild im Attribut „Poster“ ein.