All Prompts
All Prompts
herosectiontailwindanimatedparallaxlandingresponsive
Cinematic Hero Section with Parallax Blinds
Кинематографичный Hero Section с параллакс-шторками. Адаптивный UI-компонент на Tailwind CSS для лендингов и брендинга.
Prompt
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>AEX | Hero Only</title>
<script src="https://cdn.tailwindcss.com"></script>
<!-- Fonts (required for the look) -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Oswald:wght@500;600&family=Playfair+Display:ital@0;1&display=swap"
rel="stylesheet" />
<style>
body {
font-family: "Inter", sans-serif;
}
.font-display {
font-family: "Oswald", sans-serif;
}
.font-accent {
font-family: "Playfair Display", serif;
}
/* Optional scrollbar (same as original) */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #ebedea;
}
::-webkit-scrollbar-thumb {
background: #3F556B;
}
/* REQUIRED: hero uses animationIn in utility brackets */
@keyframes animationIn {
0% {
opacity: 0;
transform: translateY(30px);
filter: blur(8px);
}
100% {
opacity: 1;
transform: translateY(0);
filter: blur(0px);
}
}
</style>
</head>
<body class="bg-[#ebedea] text-[#2d322f] antialiased selection:bg-[#3F556B] selection:text-white overflow-x-hidden">
<!-- Optional: Noise overlay (part of the vibe) -->
<div class="fixed inset-0 pointer-events-none z-[100] opacity-[0.035] mix-blend-multiply"
style="background-image:url('data:image/svg+xml,%3Csvg viewBox=%220 0 200 200%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22noiseFilter%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.85%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23noiseFilter)%22/%3E%3C/svg%3E');">
</div>
<!-- HERO ONLY (from your file) -->
<main>
<section class="relative w-full py-20 lg:py-28 overflow-hidden">
<!-- FULL-WIDTH B&W BACKGROUND -->
<div class="absolute inset-0 z-0 pointer-events-none">
<img
src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/4024eb96-6b8f-4f13-99f1-f1889425c4e5_3840w.jpg?w=800&q=80"
class="w-full h-full object-cover grayscale opacity-100 scale-[1.06]"
alt=""
/>
<div class="absolute inset-0 bg-[#ebedea]/55"></div>
<div class="absolute inset-0 bg-gradient-to-r from-[#ebedea]/70 via-transparent to-[#ebedea]/50"></div>
</div>
<!-- CONTENT CONTAINER -->
<div class="relative z-10 max-w-[1400px] mx-auto px-6 lg:px-12">
<div class="flex flex-col lg:flex-row gap-12 lg:gap-16 items-center">
<!-- Left -->
<div class="w-full lg:w-[45%] flex flex-col items-end order-2 lg:order-1 text-right relative py-16">
<h1 class="relative flex flex-col items-end w-full">
<span class="font-display uppercase font-semibold tracking-tighter leading-[0.85] text-[#2d322f] text-[5.25rem] md:text-[7.25rem] lg:text-[9.5rem] [animation:animationIn_1.2s_ease-out_0.2s_both]">
CONQUER
</span>
<span class="font-display uppercase font-semibold tracking-tighter leading-[0.85] text-[#2d322f] text-[5.75rem] md:text-[7.75rem] lg:text-[10.5rem] [animation:animationIn_1.2s_ease-out_0.4s_both]">
UNKNOWN
</span>
<span class="pointer-events-none absolute -right-2 top-1/2 -translate-y-[55%] border border-[#2d322f]/45 bg-[#3F556B] px-2 py-1 text-[25px] md:text-xs font-semibold uppercase text-white tracking-[0.35em] [animation:animationIn_0.8s_ease-out_0.8s_both]">
THE
</span>
</h1>
<p
class="font-accent italic text-lg md:text-xl text-[#3F556B] mt-10 mb-4 pr-2 [animation:animationIn_0.8s_ease-out_1s_both]">
Where the wild goes quiet.
</p>
<button class="bg-[#2d322f] text-white px-10 py-4 text-xs font-semibold uppercase tracking-widest hover:bg-[#3F556B] transition-colors duration-300 mt-12 mr-2 [animation:animationIn_0.8s_ease-out_1.2s_both]">
Enter The Terrain
</button>
</div>
<!-- Right (Blinds) -->
<div
class="w-full lg:w-[115%] lg:translate-x-[3%] h-[500px] lg:h-[750px] flex items-center gap-1 lg:gap-1.5 overflow-visible relative group order-1 lg:order-2">
<div
class="w-[18%] h-[80%] -translate-y-4 relative overflow-hidden bg-[#1e2420] shadow-lg z-10 rounded-[1px]">
<div
class="absolute inset-x-0 -top-[30%] h-[160%] scale-[1.15] bg-no-repeat bg-[url('https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/3bbe5cf4-acf8-430e-9b9b-2d44d8b90f0c_3840w.webp')] js-hero-blind will-change-transform"
style="background-size: 500% 100%; background-position: 0% 50%;"></div>
</div>
<div
class="w-[22%] h-[95%] translate-y-1 relative overflow-hidden bg-[#1e2420] shadow-xl z-20 rounded-[1px]">
<div
class="absolute inset-x-0 -top-[30%] h-[160%] scale-[1.15] bg-no-repeat bg-[url('https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/3bbe5cf4-acf8-430e-9b9b-2d44d8b90f0c_3840w.webp')] js-hero-blind will-change-transform"
style="background-size: 500% 100%; background-position: 25% 50%;"></div>
</div>
<div
class="w-[28%] h-[110%] -translate-y-2 relative overflow-hidden bg-[#1e2420] shadow-2xl z-30 rounded-[1px]">
<div
class="absolute inset-x-0 -top-[30%] h-[160%] scale-[1.15] bg-no-repeat bg-[url('https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/3bbe5cf4-acf8-430e-9b9b-2d44d8b90f0c_3840w.webp')] js-hero-blind will-change-transform"
style="background-size: 500% 100%; background-position: 50% 50%;"></div>
</div>
<div
class="w-[22%] h-[95%] translate-y-1 relative overflow-hidden bg-[#1e2420] shadow-xl z-20 rounded-[1px]">
<div
class="absolute inset-x-0 -top-[30%] h-[160%] scale-[1.15] bg-no-repeat bg-[url('https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/3bbe5cf4-acf8-430e-9b9b-2d44d8b90f0c_3840w.webp')] js-hero-blind will-change-transform"
style="background-size: 500% 100%; background-position: 75% 50%;"></div>
</div>
<div
class="w-[18%] h-[80%] -translate-y-4 relative overflow-hidden bg-[#1e2420] shadow-lg z-10 rounded-[1px]">
<div
class="absolute inset-x-0 -top-[30%] h-[160%] scale-[1.15] bg-no-repeat bg-[url('https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/3bbe5cf4-acf8-430e-9b9b-2d44d8b90f0c_3840w.webp')] js-hero-blind will-change-transform"
style="background-size: 500% 100%; background-position: 100% 50%;"></div>
</div>
</div>
</div>
</div>
</section>
<!-- Optional spacer so you can scroll and see parallax -->
<section class="h-[120vh]"></section>
</main>
<!-- HERO parallax only (trimmed to blinds, same logic) -->
<script>
document.addEventListener("DOMContentLoaded", () => {
const blinds = document.querySelectorAll(".js-hero-blind");
let lastKnownScrollPosition = 0;
let ticking = false;
function doParallax(scrollPos) {
if (scrollPos < 1200) {
blinds.forEach((blind, index) => {
const distanceFromCenter = Math.abs(2 - index);
const baseSpeed = 0.028;
const stagger = distanceFromCenter * 0.02;
const yMoveRaw = scrollPos * (baseSpeed + stagger);
const yMoveClamped = Math.max(-180, Math.min(yMoveRaw, 180));
blind.style.transform = `translate3d(0, ${yMoveClamped}px, 0)`;
});
}
}
window.addEventListener(
"scroll",
() => {
lastKnownScrollPosition = window.scrollY;
if (!ticking) {
window.requestAnimationFrame(() => {
doParallax(lastKnownScrollPosition);
ticking = false;
});
ticking = true;
}
},
{ passive: true }
);
doParallax(window.scrollY);
});
</script>
</body>
</html>