Этот главный раздел имеет сильное визуальное воздействие благодаря цикличному видео, размещенному на заднем плане. Воспроизводя имиджевое видео бренда или демонстрационное видео продукта в фоновом режиме, вы можете сильно привлечь внимание пользователей.

Предварительный просмотр

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

Варианты использования и возможности

Целевая страница продукта. Интуитивно донесите ценность, показывая реальный продукт в действии на заднем плане.
Корпоративный веб-сайт: создайте профессиональное впечатление с помощью кинематографических изображений, передающих атмосферу вашего бренда.
Страница объявления о мероприятии: передайте волнение и волнение от прошлых событий и повысьте мотивацию к участию.
Особенности:
- Благодаря использованию object-cover видео становится адаптивным и покрывает весь фон независимо от размера экрана.
- Поверх видео накладывается полупрозрачное черное наложение (bg-black/50), чтобы обеспечить видимость текста.
- При указании атрибута playsinline игра будет воспроизводиться в фоновом режиме вместо полноэкранного воспроизведения даже на устройствах iOS.

##Ключевые моменты дизайна и UX (Design & UX)

Обеспечение контраста: поскольку яркость видео меняется, важно настроить непрозрачность наложения, чтобы текст всегда был читаемым.
Учитывайте скорость загрузки: видеофайлы обычно имеют большой вес. Мы рекомендуем вам подготовить файл MP4 меньшего размера (желательно также использовать WebM), а также установить изображение постера (атрибут poster).
Анимация: добавляйте плавную анимацию к элементам контента, чтобы обеспечить удобство загрузки страницы.

Как настроить (Руководство по настройке)

Измените плотность наложения: установка для <div class="absolute inset-0 z-10 bg-black/50"></div> значения bg-black/70 для <div class="absolute inset-0 z-10 bg-black/50"></div> на bg-black/70 сделает его темнее, а установка bg-black/30 сделает его ярче. – Раскрасьте наложение. Вы также можете сделать наложение цветом, соответствующим цвету вашего бренда, например «bg-blue-900/60».
Регулировка высоты: вы можете контролировать высоту раздела, изменяя h-[600px] на h-screen (полноэкранный режим) или min-h-[80vh] и т. д.

код реализации (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; }
-->

Поддержка браузера

Хорошо работает с последними версиями современных браузеров (Chrome, Firefox, Safari, Edge).
При добавлении атрибута playsinline он будет автоматически воспроизводиться в версии Safari для iOS.
Автозапуск может быть заблокирован, если в iOS включен «Режим энергосбережения» или плохая среда связи. Поэтому обязательно установите альтернативное изображение в атрибуте poster.