Fejlécek
Tiszta lendület
Élő előnézet – a komponens teljes méretben.
Élő előnézet
HTML · CSS · JS
<section class="hero-clean">
<div class="hero-clean-content">
<div class="hero-clean-text">
<div class="hero-clean-label">
<span></span>
Kreatív digitális stúdió
</div>
<h1>
Ötletekből
<em>élmény.</em>
</h1>
<p>
Olyan digitális felületeket készítünk,
amelyek nemcsak szépek, hanem emlékezetesek is.
</p>
<a href="#" class="hero-clean-button">
Fedezd fel
<span>↗</span>
</a>
</div>
<div class="hero-clean-visual">
<div class="hero-clean-image">
<img
src="https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1400&q=85"
alt="Modern kreatív tér"
>
</div>
<div class="hero-clean-number">
01
</div>
<div class="hero-clean-caption">
Creative space
</div>
<div class="hero-clean-orb">
<span>SCROLL</span>
<b>↓</b>
</div>
</div>
</div>
</section>
/* ==========================================
HERO 01 — TISZTA LENDÜLET
========================================== */
.hero-clean {
position: relative;
width: 100%;
min-height: 720px;
overflow: hidden;
background: #eeeae3;
color: #171714;
font-family: "DM Sans", sans-serif;
}
/* háttérfény */
.hero-clean::before {
content: "";
position: absolute;
width: 600px;
height: 600px;
right: -220px;
top: -240px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.7);
filter: blur(35px);
pointer-events: none;
}
/* tartalom */
.hero-clean-content {
position: relative;
z-index: 2;
width: min(1380px, 88%);
min-height: 720px;
margin: 0 auto;
display: grid;
grid-template-columns: 0.9fr 1.1fr;
align-items: center;
gap: 7vw;
}
/* ==========================================
SZÖVEG
========================================== */
.hero-clean-text {
max-width: 620px;
}
.hero-clean-label {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 28px;
color: #777168;
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 2px;
opacity: 0;
transform: translateY(20px);
animation: cleanFadeUp .8s ease forwards;
}
.hero-clean-label span {
width: 34px;
height: 1px;
background: #9a7353;
}
/* cím */
.hero-clean h1 {
margin: 0 0 32px;
font-family: "Playfair Display", serif;
font-size: clamp(64px, 7vw, 112px);
font-weight: 500;
line-height: .9;
letter-spacing: -5px;
opacity: 0;
transform: translateY(35px);
animation: cleanFadeUp 1s .12s ease forwards;
}
.hero-clean h1 em {
display: block;
color: #9a7353;
font-weight: 500;
font-style: normal;
}
/* leírás */
.hero-clean-text > p {
max-width: 440px;
margin: 0 0 38px;
color: #625e58;
font-size: 17px;
line-height: 1.7;
opacity: 0;
transform: translateY(25px);
animation: cleanFadeUp .9s .28s ease forwards;
}
/* ==========================================
GOMB
========================================== */
.hero-clean-button {
display: inline-flex;
align-items: center;
gap: 18px;
padding: 16px 24px;
border-radius: 40px;
background: #171714;
color: #fff;
text-decoration: none;
font-size: 14px;
font-weight: 500;
opacity: 0;
transform: translateY(20px);
animation: cleanFadeUp .8s .42s ease forwards;
transition:
background .3s ease,
transform .3s ease;
}
.hero-clean-button span {
font-size: 18px;
transition: transform .3s ease;
}
.hero-clean-button:hover {
background: #9a7353;
transform: translateY(-3px);
}
.hero-clean-button:hover span {
transform: translate(4px, -4px);
}
/* ==========================================
KÉP
========================================== */
.hero-clean-visual {
position: relative;
width: 100%;
max-width: 720px;
justify-self: end;
}
.hero-clean-image {
position: relative;
width: 100%;
height: min(68vh, 650px);
overflow: hidden;
border-radius: 3px;
opacity: 0;
transform: translateX(70px);
animation:
cleanImageIn 1.2s .15s
cubic-bezier(.2,.8,.2,1)
forwards;
}
.hero-clean-image::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
135deg,
rgba(255,255,255,.12),
transparent 45%
);
pointer-events: none;
}
.hero-clean-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transform: scale(1.08);
animation: cleanImageScale 1.5s .2s ease forwards;
transition: transform 1s ease;
}
.hero-clean-image:hover img {
transform: scale(1.04);
}
/* ==========================================
KÉP INFORMÁCIÓ
========================================== */
.hero-clean-number {
position: absolute;
left: -20px;
bottom: 35px;
font-family: "Playfair Display", serif;
font-size: 22px;
color: #171714;
}
.hero-clean-caption {
position: absolute;
right: 0;
bottom: -28px;
color: #777168;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 2px;
}
/* ==========================================
LEBEGŐ KÖR
========================================== */
.hero-clean-orb {
position: absolute;
right: -35px;
bottom: 55px;
width: 100px;
height: 100px;
border-radius: 50%;
background: #9a7353;
display: flex;
align-items: center;
justify-content: center;
animation: cleanFloat 4s ease-in-out infinite;
transition:
transform .4s ease;
}
.hero-clean-orb span {
position: absolute;
width: 70px;
height: 70px;
border: 1px dashed rgba(255,255,255,.7);
border-radius: 50%;
color: transparent;
animation: cleanRotate 12s linear infinite;
}
.hero-clean-orb b {
color: white;
font-size: 22px;
font-weight: 400;
}
/* ==========================================
ANIMÁCIÓK
========================================== */
@keyframes cleanFadeUp {
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes cleanImageIn {
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes cleanImageScale {
to {
transform: scale(1);
}
}
@keyframes cleanFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
@keyframes cleanRotate {
to {
transform: rotate(360deg);
}
}
/* ==========================================
TABLET
========================================== */
@media (max-width: 1000px) {
.hero-clean-content {
grid-template-columns: 1fr;
padding: 80px 0;
gap: 70px;
}
.hero-clean-text {
max-width: 700px;
}
.hero-clean-visual {
max-width: 100%;
}
.hero-clean-image {
height: 520px;
}
}
/* ==========================================
MOBIL
========================================== */
@media (max-width: 650px) {
.hero-clean {
min-height: auto;
}
.hero-clean-content {
width: 88%;
padding: 70px 0 80px;
gap: 55px;
}
.hero-clean h1 {
font-size: clamp(56px, 16vw, 80px);
letter-spacing: -3px;
}
.hero-clean-text > p {
font-size: 15px;
}
.hero-clean-image {
height: 440px;
}
.hero-clean-number {
left: -5px;
}
.hero-clean-orb {
width: 76px;
height: 76px;
right: -8px;
bottom: 35px;
}
.hero-clean-orb span {
width: 55px;
height: 55px;
}
}
/* mozgás kikapcsolása */
@media (prefers-reduced-motion: reduce) {
.hero-clean *,
.hero-clean *::before,
.hero-clean *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
}
/* ==========================================
HERO 01 — TISZTA LENDÜLET
========================================== */
document.addEventListener("DOMContentLoaded", () => {
const hero = document.querySelector(".hero-clean");
if (!hero) return;
const image = hero.querySelector(".hero-clean-image img");
const orb = hero.querySelector(".hero-clean-orb");
/* ======================================
EGÉR PARALLAX
====================================== */
if (
image &&
window.matchMedia("(pointer: fine)").matches
) {
hero.addEventListener("mousemove", (event) => {
const rect = hero.getBoundingClientRect();
const x =
(event.clientX - rect.left) /
rect.width - 0.5;
const y =
(event.clientY - rect.top) /
rect.height - 0.5;
image.style.transform =
`scale(1.04) translate(${x * -8}px, ${y * -8}px)`;
if (orb) {
orb.style.transform =
`translate(${x * 7}px, ${y * 7}px)`;
}
});
hero.addEventListener("mouseleave", () => {
image.style.transform =
"scale(1) translate(0, 0)";
if (orb) {
orb.style.transform = "";
}
});
}
});