Parallax Mountain
Layered SVG mountain silhouettes drift at different speeds — glacier blue and pine on alpine snow. The outdoor / travel-brand parallax landscape.
The code
<section class="hs-prx" aria-label="Hero">
<div class="hs-prx-sky" aria-hidden="true"></div>
<div class="hs-prx-sun" aria-hidden="true"></div>
<svg
class="hs-prx-m hs-prx-m3"
viewBox="0 0 1200 320"
preserveAspectRatio="none"
aria-hidden="true"
>
<path
d="M0,320 L0,180 L120,80 L240,140 L360,60 L480,120 L600,40 L720,110 L840,70 L960,130 L1080,90 L1200,150 L1200,320 Z"
fill="#5a7a8a"
/>
</svg>
<svg
class="hs-prx-m hs-prx-m2"
viewBox="0 0 1200 320"
preserveAspectRatio="none"
aria-hidden="true"
>
<path
d="M0,320 L0,220 L100,140 L200,200 L320,120 L440,180 L560,100 L680,170 L800,130 L920,200 L1040,150 L1200,200 L1200,320 Z"
fill="#3a5868"
/>
</svg>
<svg
class="hs-prx-m hs-prx-m1"
viewBox="0 0 1200 320"
preserveAspectRatio="none"
aria-hidden="true"
>
<path
d="M0,320 L0,260 L120,200 L240,240 L360,180 L480,220 L600,160 L720,210 L840,170 L960,230 L1080,190 L1200,240 L1200,320 Z"
fill="#1f3a4a"
/>
</svg>
<div class="hs-prx-inner">
<span class="hs-prx-eye">— EST. 1958 · LAKE COUNTRY</span>
<h2>Trails that <em>earn the silence.</em></h2>
<p>Six lodges. One ridge. The mountains your grandfather wrote home about.</p>
<a class="hs-prx-cta" href="#book">Reserve a cabin →</a>
</div>
</section> <section class="hs-prx" aria-label="Hero">
<div class="hs-prx-sky" aria-hidden="true"></div>
<div class="hs-prx-sun" aria-hidden="true"></div>
<svg
class="hs-prx-m hs-prx-m3"
viewBox="0 0 1200 320"
preserveAspectRatio="none"
aria-hidden="true"
>
<path
d="M0,320 L0,180 L120,80 L240,140 L360,60 L480,120 L600,40 L720,110 L840,70 L960,130 L1080,90 L1200,150 L1200,320 Z"
fill="#5a7a8a"
/>
</svg>
<svg
class="hs-prx-m hs-prx-m2"
viewBox="0 0 1200 320"
preserveAspectRatio="none"
aria-hidden="true"
>
<path
d="M0,320 L0,220 L100,140 L200,200 L320,120 L440,180 L560,100 L680,170 L800,130 L920,200 L1040,150 L1200,200 L1200,320 Z"
fill="#3a5868"
/>
</svg>
<svg
class="hs-prx-m hs-prx-m1"
viewBox="0 0 1200 320"
preserveAspectRatio="none"
aria-hidden="true"
>
<path
d="M0,320 L0,260 L120,200 L240,240 L360,180 L480,220 L600,160 L720,210 L840,170 L960,230 L1080,190 L1200,240 L1200,320 Z"
fill="#1f3a4a"
/>
</svg>
<div class="hs-prx-inner">
<span class="hs-prx-eye">— EST. 1958 · LAKE COUNTRY</span>
<h2>Trails that <em>earn the silence.</em></h2>
<p>Six lodges. One ridge. The mountains your grandfather wrote home about.</p>
<a class="hs-prx-cta" href="#book">Reserve a cabin →</a>
</div>
</section>.hs-prx {
position: relative; overflow: hidden;
width: 100%; min-height: 480px;
background: linear-gradient(180deg, #d8e8f0 0%, #a8c8d8 60%, #5a7a8a 100%);
font-family: 'Inter', system-ui, sans-serif;
color: #1a2840;
box-sizing: border-box;
contain: layout paint;
}
.hs-prx-sky { position: absolute; inset: 0;
background: radial-gradient(50% 70% at 80% 30%, rgba(255,240,210,0.4), transparent 70%); }
.hs-prx-sun {
position: absolute; top: 18%; right: 18%;
width: 80px; height: 80px; border-radius: 50%;
background: #f9f0d6;
box-shadow: 0 0 60px rgba(249,240,214,0.7);
}
.hs-prx-m {
position: absolute; left: 0; right: 0; bottom: 0;
width: 100%; height: 60%;
animation: hs-prx-float 12s ease-in-out infinite alternate;
}
.hs-prx-m1 { z-index: 3; height: 38%; animation-duration: 8s; }
.hs-prx-m2 { z-index: 2; height: 50%; animation-duration: 12s; animation-delay: -2s; }
.hs-prx-m3 { z-index: 1; height: 65%; animation-duration: 16s; animation-delay: -4s; }
@keyframes hs-prx-float {
0% { transform: translateX(0); }
100% { transform: translateX(-2%); }
}
.hs-prx-inner {
position: relative; z-index: 4;
padding: clamp(28px, 5vw, 56px);
max-width: 540px;
}
.hs-prx-eye {
display: inline-block;
font-family: 'JetBrains Mono', monospace;
font-size: 11px; letter-spacing: 0.18em;
color: #1f3a4a; margin-bottom: 14px;
}
.hs-prx h2 {
margin: 0 0 16px;
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(34px, 5vw, 56px);
font-weight: 700; letter-spacing: -0.02em; line-height: 1.05;
color: #0d2030;
}
.hs-prx h2 em { color: #1f3a4a; font-style: italic; }
.hs-prx p { margin: 0 0 22px; font-size: 16px; line-height: 1.55; color: #2a4858; max-width: 420px; }
.hs-prx-cta {
display: inline-block; padding: 12px 22px;
background: #f9f0d6; color: #1f3a4a;
border: 2px solid #1f3a4a; border-radius: 0;
font-family: 'JetBrains Mono', monospace;
font-size: 13px; font-weight: 700; letter-spacing: 0.12em;
text-decoration: none;
transition: background 0.15s, color 0.15s;
}
.hs-prx-cta:hover { background: #1f3a4a; color: #f9f0d6; }
@media (prefers-reduced-motion: reduce) {
.hs-prx-m { animation: none; }
.hs-prx-cta { transition: none; }
} .hs-prx {
position: relative; overflow: hidden;
width: 100%; min-height: 480px;
background: linear-gradient(180deg, #d8e8f0 0%, #a8c8d8 60%, #5a7a8a 100%);
font-family: 'Inter', system-ui, sans-serif;
color: #1a2840;
box-sizing: border-box;
contain: layout paint;
}
.hs-prx-sky { position: absolute; inset: 0;
background: radial-gradient(50% 70% at 80% 30%, rgba(255,240,210,0.4), transparent 70%); }
.hs-prx-sun {
position: absolute; top: 18%; right: 18%;
width: 80px; height: 80px; border-radius: 50%;
background: #f9f0d6;
box-shadow: 0 0 60px rgba(249,240,214,0.7);
}
.hs-prx-m {
position: absolute; left: 0; right: 0; bottom: 0;
width: 100%; height: 60%;
animation: hs-prx-float 12s ease-in-out infinite alternate;
}
.hs-prx-m1 { z-index: 3; height: 38%; animation-duration: 8s; }
.hs-prx-m2 { z-index: 2; height: 50%; animation-duration: 12s; animation-delay: -2s; }
.hs-prx-m3 { z-index: 1; height: 65%; animation-duration: 16s; animation-delay: -4s; }
@keyframes hs-prx-float {
0% { transform: translateX(0); }
100% { transform: translateX(-2%); }
}
.hs-prx-inner {
position: relative; z-index: 4;
padding: clamp(28px, 5vw, 56px);
max-width: 540px;
}
.hs-prx-eye {
display: inline-block;
font-family: 'JetBrains Mono', monospace;
font-size: 11px; letter-spacing: 0.18em;
color: #1f3a4a; margin-bottom: 14px;
}
.hs-prx h2 {
margin: 0 0 16px;
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(34px, 5vw, 56px);
font-weight: 700; letter-spacing: -0.02em; line-height: 1.05;
color: #0d2030;
}
.hs-prx h2 em { color: #1f3a4a; font-style: italic; }
.hs-prx p { margin: 0 0 22px; font-size: 16px; line-height: 1.55; color: #2a4858; max-width: 420px; }
.hs-prx-cta {
display: inline-block; padding: 12px 22px;
background: #f9f0d6; color: #1f3a4a;
border: 2px solid #1f3a4a; border-radius: 0;
font-family: 'JetBrains Mono', monospace;
font-size: 13px; font-weight: 700; letter-spacing: 0.12em;
text-decoration: none;
transition: background 0.15s, color 0.15s;
}
.hs-prx-cta:hover { background: #1f3a4a; color: #f9f0d6; }
@media (prefers-reduced-motion: reduce) {
.hs-prx-m { animation: none; }
.hs-prx-cta { transition: none; }
}