Fejlécek
Nagyképes magazin
Élő előnézet – a komponens teljes méretben.
Élő előnézet
HTML · CSS · JS
<section class="hero-magazine">
<div class="hero-magazine-bg">
<img
src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=2200&q=90"
alt="Monumentális hegyvidéki táj"
>
</div>
<div class="hero-magazine-overlay"></div>
<div class="hero-magazine-content">
<div class="hero-magazine-top">
<span>01 — Felfedezés</span>
<span>Nature / Journey</span>
</div>
<div class="hero-magazine-main">
<div class="hero-magazine-label">
Egy másik világ
</div>
<h1>
Ahol a<br>
<span>horizont</span><br>
kezdődik.
</h1>
<p>
Vannak helyek, ahol egy pillanatra
minden elcsendesedik.
</p>
<a href="#" class="hero-magazine-link">
Felfedezem
<span>↗</span>
</a>
</div>
</div>
<div class="hero-magazine-bottom">
<span>47° 12' N</span>
<div class="hero-magazine-progress">
<span></span>
</div>
<span>18° 24' E</span>
</div>
<div class="hero-magazine-scroll">
<span>Görgess</span>
<i></i>
</div>
</section>
/* ==========================================
HERO 03 — VÉGTELEN HORIZONT
========================================== */
.hero-magazine {
position: relative;
width: 100%;
min-height: 760px;
height: min(100vh, 950px);
overflow: hidden;
background: #151815;
color: #fff;
font-family: "DM Sans", sans-serif;
}
/* ==========================================
HÁTTÉRKÉP
========================================== */
.hero-magazine-bg {
position: absolute;
inset: 0;
overflow: hidden;
}
.hero-magazine-bg img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transform: scale(1.13);
animation:
magazineImageReveal 2s
cubic-bezier(.16,1,.3,1)
forwards;
transition: transform 1.4s ease;
}
.hero-magazine:hover .hero-magazine-bg img {
transform: scale(1.045);
}
/* ==========================================
OVERLAY
========================================== */
.hero-magazine-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(7,10,8,.72) 0%,
rgba(7,10,8,.34) 38%,
rgba(7,10,8,.05) 75%
);
z-index: 1;
}
.hero-magazine-overlay::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
0deg,
rgba(5,7,6,.68) 0%,
transparent 32%,
transparent 72%,
rgba(5,7,6,.18) 100%
);
}
/* ==========================================
TARTALOM
========================================== */
.hero-magazine-content {
position: relative;
z-index: 3;
width: min(1420px, 88%);
height: 100%;
margin: 0 auto;
display: flex;
flex-direction: column;
}
/* ==========================================
FELSŐ INFORMÁCIÓ
========================================== */
.hero-magazine-top {
display: flex;
justify-content: space-between;
padding-top: 42px;
color: rgba(255,255,255,.72);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 2px;
opacity: 0;
animation:
magazineFade .9s .7s ease
forwards;
}
/* ==========================================
FŐ TARTALOM
========================================== */
.hero-magazine-main {
margin-top: auto;
margin-bottom: 135px;
max-width: 760px;
}
.hero-magazine-label {
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: 26px;
color: rgba(255,255,255,.78);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 3px;
opacity: 0;
transform: translateY(25px);
animation:
magazineUp .9s .65s ease
forwards;
}
.hero-magazine-label::before {
content: "";
width: 35px;
height: 1px;
background: #d2ad7c;
}
/* ==========================================
CÍM
========================================== */
.hero-magazine h1 {
margin: 0;
font-family: "Playfair Display", Georgia, serif;
font-size: clamp(70px, 9vw, 145px);
font-weight: 400;
line-height: .82;
letter-spacing: -6px;
text-shadow:
0 5px 30px rgba(0,0,0,.15);
opacity: 0;
transform: translateY(45px);
animation:
magazineTitle 1.2s .75s
cubic-bezier(.16,1,.3,1)
forwards;
}
.hero-magazine h1 span {
margin-left: 9vw;
color: #d2ad7c;
font-style: italic;
}
/* ==========================================
LEÍRÁS
========================================== */
.hero-magazine-main p {
max-width: 360px;
margin: 36px 0 28px;
color: rgba(255,255,255,.72);
font-size: 15px;
line-height: 1.7;
opacity: 0;
transform: translateY(20px);
animation:
magazineUp .9s 1s ease
forwards;
}
/* ==========================================
LINK
========================================== */
.hero-magazine-link {
display: inline-flex;
align-items: center;
gap: 18px;
color: #fff;
text-decoration: none;
padding-bottom: 8px;
border-bottom: 1px solid rgba(255,255,255,.6);
font-size: 13px;
opacity: 0;
transform: translateY(15px);
animation:
magazineUp .8s 1.15s ease
forwards;
transition:
gap .35s ease,
border-color .35s ease;
}
.hero-magazine-link span {
font-size: 18px;
transition: transform .35s ease;
}
.hero-magazine-link:hover {
gap: 25px;
border-color: #d2ad7c;
}
.hero-magazine-link:hover span {
transform: translate(3px, -3px);
}
/* ==========================================
ALSÓ INFORMÁCIÓ
========================================== */
.hero-magazine-bottom {
position: absolute;
z-index: 4;
left: 6%;
right: 6%;
bottom: 35px;
display: flex;
align-items: center;
gap: 18px;
color: rgba(255,255,255,.65);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 2px;
}
.hero-magazine-progress {
flex: 1;
height: 1px;
background: rgba(255,255,255,.2);
overflow: hidden;
}
.hero-magazine-progress span {
display: block;
width: 27%;
height: 100%;
background: #d2ad7c;
transform: translateX(-100%);
animation:
magazineProgress 1.4s 1.1s
ease forwards;
}
/* ==========================================
SCROLL JELZÉS
========================================== */
.hero-magazine-scroll {
position: absolute;
z-index: 4;
right: 4.5%;
top: 50%;
transform:
translateY(-50%)
rotate(90deg);
display: flex;
align-items: center;
gap: 14px;
color: rgba(255,255,255,.65);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 3px;
opacity: 0;
animation:
magazineFade 1s 1.4s ease
forwards;
}
.hero-magazine-scroll i {
display: block;
width: 45px;
height: 1px;
background: rgba(255,255,255,.6);
position: relative;
}
.hero-magazine-scroll i::after {
content: "";
position: absolute;
right: 0;
top: -2px;
width: 5px;
height: 5px;
border-right: 1px solid #fff;
border-top: 1px solid #fff;
transform: rotate(45deg);
}
/* ==========================================
ANIMÁCIÓK
========================================== */
@keyframes magazineImageReveal {
from {
opacity: 0;
transform: scale(1.13);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes magazineFade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes magazineUp {
from {
opacity: 0;
transform: translateY(25px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes magazineTitle {
from {
opacity: 0;
transform: translateY(45px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes magazineProgress {
to {
transform: translateX(0);
}
}
/* ==========================================
TABLET
========================================== */
@media (max-width: 900px) {
.hero-magazine {
min-height: 700px;
}
.hero-magazine-main {
margin-bottom: 125px;
}
.hero-magazine h1 {
font-size: clamp(65px, 11vw, 105px);
}
.hero-magazine-scroll {
display: none;
}
}
/* ==========================================
MOBIL
========================================== */
@media (max-width: 600px) {
.hero-magazine {
min-height: 680px;
height: 100svh;
}
.hero-magazine-content {
width: 86%;
}
.hero-magazine-top {
padding-top: 28px;
font-size: 8px;
}
.hero-magazine-top span:last-child {
display: none;
}
.hero-magazine-main {
margin-bottom: 105px;
}
.hero-magazine h1 {
font-size: clamp(58px, 17vw, 86px);
line-height: .86;
letter-spacing: -4px;
}
.hero-magazine h1 span {
margin-left: 11vw;
}
.hero-magazine-main p {
max-width: 300px;
margin-top: 28px;
font-size: 14px;
}
.hero-magazine-bottom {
left: 7%;
right: 7%;
bottom: 25px;
}
.hero-magazine-bottom span {
font-size: 7px;
}
.hero-magazine-overlay {
background:
linear-gradient(
90deg,
rgba(7,10,8,.78),
rgba(7,10,8,.12)
);
}
}
/* ==========================================
MOZGÁS CSÖKKENTÉSE
========================================== */
@media (prefers-reduced-motion: reduce) {
.hero-magazine *,
.hero-magazine *::before,
.hero-magazine *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
}
/* ==========================================
HERO 03 — VÉGTELEN HORIZONT
========================================== */
document.addEventListener("DOMContentLoaded", () => {
const hero = document.querySelector(".hero-magazine");
if (!hero) return;
const image = hero.querySelector(".hero-magazine-bg img");
/* ======================================
FINOM 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.045) translate(${x * -14}px, ${y * -10}px)`;
});
hero.addEventListener("mouseleave", () => {
image.style.transform =
"scale(1) translate(0, 0)";
});
}
});