homepage/src/lib/components/TitleImgParallax.svelte

77 lines
1.2 KiB
Svelte
Raw Normal View History

2023-06-25 12:15:20 +02:00
<script>
export let src
</script>
<style>
:root {
--scale: 0.3;
--space: 10vw;
--font-primary: 'Lato', sans-serif;
--font-heading: 'Playfair Display', serif;
}
@media (prefers-reduced-motion) {
:root {
--scale: 0;
}
}
* {
box-sizing: border-box;
}
.section {
margin-bottom: -20vh;
transform-origin: center top;
transform: translateY(-1rem)
scaleY(calc(1 - var(--scale)));
}
.section > * {
transform-origin: center top;
transform: scaleY(calc(1 / (1 - var(--scale))));
}
.content {
position: relative;
margin: 30vh auto 0;
}
.image-container {
position: sticky;
display: flex;
align-items: center;
justify-content: center;
top: 0;
height: max(50dvh, 500px);
z-index: -10;
}
.image-container img {
display: block;
position: absolute;
top: 0;
width: min(1000px, 100dvw);
z-index: -1;
height: max(60dvh,600px);
object-fit: cover;
/*object-position: top;*/
object-position: 50% 20%;
}
.image-container::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 50%;
}
:global(h1){
width: 100%;
}
</style>
<section class="section">
<figure class="image-container"><img {src} alt=""/></figure>
<div class=content><slot></slot></div>
</section>