Fejlécek
Szabad pályák
Élő előnézet – a komponens teljes méretben.
Élő előnézet
HTML · CSS · JS
<section class="hero-szabad-palyak">
<div class="sp-halo sp-halo-1"></div>
<div class="sp-halo sp-halo-2"></div>
<div class="sp-shape sp-circle"></div>
<div class="sp-shape sp-square"></div>
<div class="sp-shape sp-triangle"></div>
<div class="sp-shape sp-diamond"></div>
<div class="sp-shape sp-ring"></div>
<div class="sp-shape sp-pill"></div>
<div class="sp-line sp-line-1"></div>
<div class="sp-line sp-line-2"></div>
<div class="sp-line sp-line-3"></div>
<div class="sp-content">
<div class="sp-kicker">
<span></span>
<em class="sp-typing"></em>
<b></b>
</div>
<h1>
Nem kell<br>
<i>egyformának</i><br>
lenned.
</h1>
<p>
A karakter ott kezdődik,
ahol megszűnnek a megszokott formák.
</p>
<a href="#" class="sp-button">
Megnézem
<span>↗</span>
</a>
</div>
<div class="sp-mini-text">
FORMA / MOZGÁS / KARAKTER
</div>
<div class="sp-number">10</div>
</section>
/* =========================================================
10. SZABAD PÁLYÁK
Stabil, ugrásmentes animáció
========================================================= */
.hero-szabad-palyak {
position: relative;
width: 100%;
min-height: 720px;
overflow: hidden;
background:
radial-gradient(circle at 72% 35%,
rgba(73, 104, 91, 0.18),
transparent 28%),
radial-gradient(circle at 18% 75%,
rgba(181, 151, 91, 0.08),
transparent 25%),
#17211f;
color: #f2eee5;
isolation: isolate;
}
/* ---------------------------------------------------------
HÁTTÉRFÉNYEK
--------------------------------------------------------- */
.hero-szabad-palyak::before {
content: "";
position: absolute;
inset: -20%;
z-index: 0;
background:
radial-gradient(
circle at 70% 35%,
rgba(102, 135, 119, 0.13),
transparent 25%
),
radial-gradient(
circle at 35% 80%,
rgba(201, 170, 103, 0.08),
transparent 24%
);
pointer-events: none;
animation:
spAmbient 14s ease-in-out infinite alternate;
}
@keyframes spAmbient {
from {
opacity: .65;
}
to {
opacity: 1;
}
}
/* ---------------------------------------------------------
FINOM VONALAK
--------------------------------------------------------- */
.hero-szabad-palyak::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background-image:
linear-gradient(
90deg,
rgba(255,255,255,.025) 1px,
transparent 1px
),
linear-gradient(
rgba(255,255,255,.018) 1px,
transparent 1px
);
background-size: 90px 90px;
mask-image: linear-gradient(
to bottom,
transparent,
rgba(0,0,0,.8) 25%,
rgba(0,0,0,.8) 75%,
transparent
);
pointer-events: none;
}
/* ---------------------------------------------------------
TARTALOM
--------------------------------------------------------- */
.hero-szabad-palyak .sp-content {
position: relative;
z-index: 10;
width: min(590px, 78%);
margin-left: 10%;
padding-top: 165px;
}
/* ---------------------------------------------------------
KICKER
--------------------------------------------------------- */
.hero-szabad-palyak .sp-kicker {
display: flex;
align-items: center;
gap: 12px;
min-height: 24px;
margin-bottom: 28px;
color: #cbb77f;
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
}
.hero-szabad-palyak .sp-kicker::before {
content: "";
width: 32px;
height: 1px;
background: #cbb77f;
flex: 0 0 auto;
}
.hero-szabad-palyak .sp-typing {
display: inline-block;
min-width: 180px;
}
/* ---------------------------------------------------------
CÍM
--------------------------------------------------------- */
.hero-szabad-palyak h1 {
margin: 0 !important;
color: #f3f0e8 !important;
font-family:
Georgia,
"Times New Roman",
serif;
font-size: clamp(64px, 8vw, 124px);
line-height: .87;
font-weight: 400;
letter-spacing: -.065em;
}
.hero-szabad-palyak h1 span {
display: block;
color: #f3f0e8 !important;
}
.hero-szabad-palyak h1 strong {
display: block;
margin-left: 13%;
color: #d4bc82 !important;
font-weight: 400;
font-style: italic;
}
/* ---------------------------------------------------------
LEÍRÁS
--------------------------------------------------------- */
.hero-szabad-palyak .sp-description {
max-width: 430px;
margin: 36px 0 0 13%;
color: rgba(243,240,232,.68);
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 15px;
line-height: 1.8;
}
/* ---------------------------------------------------------
GOMB
--------------------------------------------------------- */
.hero-szabad-palyak .sp-button {
display: inline-flex;
align-items: center;
gap: 18px;
margin: 34px 0 0 13%;
padding: 15px 22px;
border: 1px solid rgba(212,188,130,.55);
color: #f3f0e8;
background: rgba(255,255,255,.025);
text-decoration: none;
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 12px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
transition:
background .35s ease,
border-color .35s ease;
}
.hero-szabad-palyak .sp-button span {
font-size: 18px;
line-height: 1;
}
.hero-szabad-palyak .sp-button:hover {
background: rgba(212,188,130,.12);
border-color: #d4bc82;
}
/* =========================================================
FORMÁK
========================================================= */
.hero-szabad-palyak .sp-shape {
position: absolute;
z-index: 3;
pointer-events: none;
will-change: translate;
}
/* ---------------------------------------------------------
KÖR
--------------------------------------------------------- */
.hero-szabad-palyak .sp-circle {
width: 230px;
height: 230px;
top: 10%;
right: 15%;
border-radius: 50%;
border: 1px solid rgba(212,188,130,.28);
background:
radial-gradient(
circle at 35% 30%,
rgba(212,188,130,.16),
transparent 55%
);
animation:
spCircleMove 8s ease-in-out infinite alternate;
}
@keyframes spCircleMove {
from {
translate: 0 0;
}
to {
translate: 42px 28px;
}
}
/* ---------------------------------------------------------
NÉGYZET
--------------------------------------------------------- */
.hero-szabad-palyak .sp-square {
width: 115px;
height: 115px;
right: 31%;
bottom: 15%;
border: 1px solid rgba(147,176,158,.42);
rotate: 17deg;
animation:
spSquareMove 7s ease-in-out 1s infinite alternate;
}
@keyframes spSquareMove {
from {
translate: 0 0;
rotate: 17deg;
}
to {
translate: -34px -22px;
rotate: 31deg;
}
}
/* ---------------------------------------------------------
HÁROMSZÖG
--------------------------------------------------------- */
.hero-szabad-palyak .sp-triangle {
width: 0;
height: 0;
left: 47%;
top: 15%;
border-left: 54px solid transparent;
border-right: 54px solid transparent;
border-bottom: 92px solid rgba(212,188,130,.16);
filter:
drop-shadow(
0 0 25px rgba(212,188,130,.08)
);
animation:
spTriangleMove 9s ease-in-out 2s infinite alternate;
}
@keyframes spTriangleMove {
from {
translate: 0 0;
}
to {
translate: 38px 48px;
}
}
/* ---------------------------------------------------------
ROMBUSZ
--------------------------------------------------------- */
.hero-szabad-palyak .sp-diamond {
width: 82px;
height: 82px;
right: 7%;
top: 56%;
border: 1px solid rgba(212,188,130,.42);
rotate: 45deg;
animation:
spDiamondMove 10s ease-in-out 1.5s infinite alternate;
}
@keyframes spDiamondMove {
from {
translate: 0 0;
rotate: 45deg;
}
to {
translate: -48px -36px;
rotate: 70deg;
}
}
/* ---------------------------------------------------------
GYŰRŰ
--------------------------------------------------------- */
.hero-szabad-palyak .sp-ring {
width: 180px;
height: 180px;
left: 57%;
bottom: -70px;
border-radius: 50%;
border:
1px solid
rgba(147,176,158,.25);
animation:
spRingMove 11s ease-in-out 2.5s infinite alternate;
}
@keyframes spRingMove {
from {
translate: 0 0;
}
to {
translate: -45px -35px;
}
}
/* ---------------------------------------------------------
PILL
--------------------------------------------------------- */
.hero-szabad-palyak .sp-pill {
width: 145px;
height: 42px;
left: 70%;
top: 22%;
border-radius: 100px;
border:
1px solid
rgba(147,176,158,.28);
rotate: -28deg;
animation:
spPillMove 8.5s ease-in-out 3s infinite alternate;
}
@keyframes spPillMove {
from {
translate: 0 0;
rotate: -28deg;
}
to {
translate: -35px 40px;
rotate: -10deg;
}
}
/* =========================================================
DIAGONÁLIS FÉNYCSÍKOK
========================================================= */
.hero-szabad-palyak .sp-line {
position: absolute;
z-index: 2;
width: 1px;
height: 240px;
background:
linear-gradient(
to bottom,
transparent,
rgba(212,188,130,.42),
transparent
);
opacity: .5;
pointer-events: none;
will-change: translate;
}
.hero-szabad-palyak .sp-line-1 {
left: 63%;
top: -80px;
rotate: 32deg;
animation:
spLineOne 7s ease-in-out infinite alternate;
}
.hero-szabad-palyak .sp-line-2 {
left: 77%;
top: 10%;
rotate: 32deg;
opacity: .28;
animation:
spLineTwo 9s ease-in-out 1s infinite alternate;
}
.hero-szabad-palyak .sp-line-3 {
left: 87%;
top: 42%;
rotate: 32deg;
opacity: .2;
animation:
spLineThree 11s ease-in-out 2s infinite alternate;
}
@keyframes spLineOne {
from {
translate: 0 0;
}
to {
translate: 55px 80px;
}
}
@keyframes spLineTwo {
from {
translate: 0 0;
}
to {
translate: -50px 65px;
}
}
@keyframes spLineThree {
from {
translate: 0 0;
}
to {
translate: -65px -45px;
}
}
/* =========================================================
OLDALJELZŐ
========================================================= */
.hero-szabad-palyak .sp-number {
position: absolute;
z-index: 10;
right: 6%;
bottom: 7%;
color: rgba(243,240,232,.28);
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 12px;
letter-spacing: .25em;
}
/* =========================================================
FINOM FOLYAMATOS FÉNY
========================================================= */
.hero-szabad-palyak .sp-glow {
position: absolute;
z-index: 1;
width: 420px;
height: 420px;
left: 58%;
top: 25%;
border-radius: 50%;
background:
radial-gradient(
circle,
rgba(143,173,155,.08),
transparent 68%
);
filter: blur(20px);
pointer-events: none;
animation:
spGlow 12s ease-in-out infinite alternate;
}
@keyframes spGlow {
from {
translate: -20px 10px;
scale: .92;
opacity: .55;
}
to {
translate: 35px -25px;
scale: 1.08;
opacity: .9;
}
}
/* =========================================================
MOBIL
========================================================= */
@media (max-width: 800px) {
.hero-szabad-palyak {
min-height: 680px;
}
.hero-szabad-palyak .sp-content {
width: 82%;
margin-left: 8%;
padding-top: 125px;
}
.hero-szabad-palyak h1 {
font-size: clamp(55px, 15vw, 82px);
}
.hero-szabad-palyak .sp-description {
margin-left: 5%;
}
.hero-szabad-palyak .sp-button {
margin-left: 5%;
}
.hero-szabad-palyak .sp-circle {
width: 150px;
height: 150px;
right: -20px;
}
.hero-szabad-palyak .sp-square {
width: 80px;
height: 80px;
right: 15%;
}
.hero-szabad-palyak .sp-ring {
width: 120px;
height: 120px;
}
.hero-szabad-palyak .sp-pill {
left: 72%;
}
}
/* =========================================================
MOZGÁS CSÖKKENTÉSE
========================================================= */
@media (prefers-reduced-motion: reduce) {
.hero-szabad-palyak *,
.hero-szabad-palyak::before {
animation: none !important;
transition: none !important;
}
}
document.addEventListener("DOMContentLoaded", () => {
const hero =
document.querySelector(".hero-szabad-palyak");
if (!hero) return;
const typing =
hero.querySelector(".sp-typing");
if (!typing) return;
/* Ha a böngésző mozgáscsökkentést kér,
a gépelés ettől még működhet. */
const words = [
"Szabad gondolatok",
"Merész formák",
"Új irányok",
"Más szemszög"
];
let wordIndex = 0;
let charIndex = 0;
let deleting = false;
function typeText() {
const word = words[wordIndex];
if (!deleting) {
charIndex++;
typing.textContent =
word.substring(0, charIndex);
if (charIndex >= word.length) {
deleting = true;
setTimeout(typeText, 1700);
return;
}
} else {
charIndex--;
typing.textContent =
word.substring(0, charIndex);
if (charIndex <= 0) {
deleting = false;
wordIndex =
(wordIndex + 1) % words.length;
}
}
setTimeout(
typeText,
deleting ? 40 : 75
);
}
typeText();
});