94 lines
2 KiB
Text
94 lines
2 KiB
Text
---
|
|
import Layout from "../layouts/BaseLayout.astro";
|
|
---
|
|
|
|
<Layout>
|
|
<title slot="head">Home</title>
|
|
<style>
|
|
:root {
|
|
--scroll-speed: 10s;
|
|
}
|
|
.parallax-container {
|
|
position: relative;
|
|
height: 208px;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
z-index: 0;
|
|
}
|
|
|
|
.layer {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 1600vw; /* bg images are 160px, so use 16*vw for smooth scrolling */
|
|
background-repeat: round;
|
|
background-position: bottom;
|
|
background-size: contain;
|
|
}
|
|
|
|
.layer-back {
|
|
background-image: url("/bg-clouds.png");
|
|
z-index: 1;
|
|
animation: scroll calc(var(--scroll-speed) * 42) linear infinite;
|
|
}
|
|
|
|
.layer-middle {
|
|
background-image: url("/bg-mountains.png");
|
|
z-index: 2;
|
|
animation: scroll calc(var(--scroll-speed) * 32) linear infinite;
|
|
}
|
|
|
|
.layer-front {
|
|
background-image: url("/bg-trees.png");
|
|
z-index: 3;
|
|
animation: scroll calc(var(--scroll-speed) * 11) linear infinite;
|
|
}
|
|
|
|
@keyframes scroll {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
100% {
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
|
|
section#hero {
|
|
position: relative;
|
|
padding: 2rem;
|
|
background-color: #f8f9fa;
|
|
z-index: -1;
|
|
}
|
|
|
|
div.hero {
|
|
position: relative;
|
|
top: calc(-4 * 0.9rem);
|
|
left: 12px;
|
|
width: calc(100% - 24px);
|
|
}
|
|
div.hero > h1 {
|
|
color: #fff;
|
|
margin-bottom: 16px;
|
|
}
|
|
div.hero > p {
|
|
font-size: 16px;
|
|
}
|
|
</style>
|
|
<Fragment slot="content">
|
|
<section id="hero">
|
|
<div class="parallax-container">
|
|
<div class="layer layer-back"></div>
|
|
<div class="layer layer-middle"></div>
|
|
<div class="layer layer-front"></div>
|
|
</div>
|
|
<div class="hero">
|
|
<h1>Lorem Ipsum</h1>
|
|
<p>
|
|
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
|
|
consectetur, adipisci velit.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
</Fragment>
|
|
</Layout>
|