Bu kahraman bölümü, arka plana yerleştirilen döngüsel bir videoyla güçlü bir görsel etkiye sahiptir. Arka planda bir marka imajı videosu veya ürün demo videosu oynatarak kullanıcıların dikkatini güçlü bir şekilde çekebilirsiniz.

Önizleme

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

Kullanım Durumları ve Özellikler

Ürün Açılış Sayfası: Gerçek ürünü arka planda çalışırken göstererek değeri sezgisel olarak aktarın.
Kurumsal web sitesi: Markanızın atmosferini yansıtan sinematik görsellerle profesyonel bir izlenim yaratın.
Etkinlik duyuru sayfası: Geçmiş etkinliklerin heyecanını ve heyecanını aktarın ve katılım motivasyonunu artırın.
Özellikler:
- ‘Nesne kapağı’ kullanıldığında video duyarlı hale gelir ve ekran boyutundan bağımsız olarak arka planın tamamını kaplar.
- Metnin görünürlüğünü sağlamak için videonun üzerine yarı saydam siyah bir katman (“bg-black/50”) yerleştirilir.
- ‘playsinline’ özelliği belirlendiğinde oyun, iOS cihazlarda bile tam ekran oynatmak yerine arka planda satır içi olarak oynatılacaktır.

Tasarım ve UX’in önemli noktaları (Tasarım ve UX)

Kontrastın Sağlanması: Videoların parlaklığı değiştiğinden, metnin her zaman okunabilmesi için kaplamanın opaklığını ayarlamak önemlidir.
Yükleme hızına dikkat edilmesi: Video dosyaları genellikle ağırdır. Daha küçük kapasiteli bir MP4 dosyası hazırlamanızı (tercihen ayrıca WebM kullanmanızı) ve ayrıca bir poster resmi (“poster” özelliği) ayarlamanızı öneririz.
Animasyonlar: Sayfa yüklenirken zengin bir deneyim sağlamak için içerik öğelerine giderek artan animasyonlar ekleyin.

Nasıl kişiselleştirilir (Özelleştirme Kılavuzu)

Yer paylaşımı yoğunluğunu değiştirin: <div class="absolute inset-0 z-10 bg-black/50"></div> öğesinin bg-black/50 değerini bg-black/70 olarak ayarlamak onu daha koyu hale getirecek ve bg-black/30 değerini ayarlamak onu daha parlak yapacaktır.
Yer paylaşımını renklendirin: Ayrıca kaplamayı “bg-blue-900/60” gibi marka renginize uyacak şekilde renklendirebilirsiniz.
Yüksekliği ayarla: “h-[600px]” ifadesini “h-screen” (tam ekran) veya “min-h-[80vh]” vb. olarak değiştirerek bölümün yüksekliğini kontrol edebilirsiniz.

uygulama kodu (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; }
-->

Tarayıcı Desteği

Modern tarayıcıların (Chrome, Firefox, Safari, Edge) en son sürümleriyle iyi çalışır.
‘playsinline’ özelliği eklendiğinde, Safari’nin iOS sürümünde otomatik olarak satır içi oynatılacaktır.
iOS’un “Düşük Güç Modu” açıksa veya iletişim ortamı zayıfsa otomatik oynatma engellenebilir. Bu nedenle “poster” özelliğinde alternatif bir resim ayarladığınızdan emin olun.