2023-06-25 12:15:20 +02:00
|
|
|
<script>
|
|
|
|
export let src
|
2023-07-11 18:47:29 +02:00
|
|
|
export let placeholder_src
|
|
|
|
let isloaded=false
|
2023-06-25 12:15:20 +02:00
|
|
|
</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;
|
|
|
|
}
|
|
|
|
|
2023-07-11 18:47:29 +02:00
|
|
|
#image{
|
2023-06-25 12:15:20 +02:00
|
|
|
display: block;
|
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
|
|
width: min(1000px, 100dvw);
|
|
|
|
z-index: -1;
|
2023-07-11 19:36:45 +02:00
|
|
|
opacity: 0;
|
|
|
|
transition: 200ms;
|
2023-06-25 12:15:20 +02:00
|
|
|
height: max(60dvh,600px);
|
|
|
|
object-fit: cover;
|
|
|
|
object-position: 50% 20%;
|
2023-07-11 18:47:29 +02:00
|
|
|
backdrop-filter: blur(20px);
|
2023-07-11 19:36:45 +02:00
|
|
|
transition: 200ms;
|
2023-07-11 18:47:29 +02:00
|
|
|
filter: blur(20px);
|
2023-07-11 19:36:45 +02:00
|
|
|
z-index: -10;
|
2023-06-25 12:15:20 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.image-container::after {
|
|
|
|
content: '';
|
|
|
|
position: absolute;
|
|
|
|
bottom: 0;
|
|
|
|
left: 0;
|
|
|
|
height: 50%;
|
|
|
|
}
|
|
|
|
:global(h1){
|
|
|
|
width: 100%;
|
|
|
|
}
|
2023-07-11 18:47:29 +02:00
|
|
|
.placeholder{
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
background-size: cover;
|
|
|
|
background-position: 50% 20%;
|
|
|
|
position: absolute;
|
|
|
|
width: min(1000px, 100dvw);
|
|
|
|
height: max(60dvh,600px);
|
|
|
|
z-index: -2;
|
|
|
|
}
|
2023-07-11 19:36:45 +02:00
|
|
|
.placeholder_blur{
|
|
|
|
width: inherit;
|
|
|
|
height: inherit;
|
|
|
|
backdrop-filter: blur(20px);
|
|
|
|
}
|
2023-07-11 18:47:29 +02:00
|
|
|
div:has(.placeholder){
|
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
|
|
width: min(1000px, 100dvw);
|
|
|
|
height: max(60dvh,600px);
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
.unblur#image{
|
|
|
|
filter: blur(0px) !important;
|
2023-07-11 19:36:45 +02:00
|
|
|
opacity: 1;
|
2023-07-11 18:47:29 +02:00
|
|
|
}
|
2023-06-25 12:15:20 +02:00
|
|
|
</style>
|
|
|
|
<section class="section">
|
2023-07-11 18:47:29 +02:00
|
|
|
<figure class="image-container">
|
|
|
|
<div>
|
|
|
|
<div class=placeholder style="background-image:url({placeholder_src})" >
|
2023-07-11 19:36:45 +02:00
|
|
|
<div class=placeholder_blur>
|
2023-07-11 18:47:29 +02:00
|
|
|
<img class:unblur={isloaded} id=image {src} on:load={() => isloaded=true} alt=""/>
|
2023-07-11 19:36:45 +02:00
|
|
|
</div>
|
2023-07-11 18:47:29 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</figure>
|
2023-06-25 12:15:20 +02:00
|
|
|
<div class=content><slot></slot></div>
|
|
|
|
</section>
|