Alexander/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

do not show progress of downloading full image

Browse Source
This commit is contained in:
Alexander Bocken 2023-07-11 19:36:45 +02:00
parent 08607fafe7
commit 8e34bf512e
Signed by: Alexander
GPG Key ID: 1D237BE83F9B05E8
1 changed files with 12 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/lib/components/TitleImgParallax.svelte
View File

@ -54,12 +54,15 @@
top: 0; top: 0;
width: min(1000px, 100dvw); width: min(1000px, 100dvw);
z-index: -1; z-index: -1;
opacity: 0;
transition: 200ms;
height: max(60dvh,600px); height: max(60dvh,600px);
object-fit: cover; object-fit: cover;
object-position: 50% 20%; object-position: 50% 20%;
backdrop-filter: blur(20px); backdrop-filter: blur(20px);
transition: 50ms; transition: 200ms;
filter: blur(20px); filter: blur(20px);
z-index: -10;
} }
.image-container::after { .image-container::after {
@ -81,6 +84,11 @@
height: max(60dvh,600px); height: max(60dvh,600px);
z-index: -2; z-index: -2;
} }
.placeholder_blur{
width: inherit;
height: inherit;
backdrop-filter: blur(20px);
}
div:has(.placeholder){ div:has(.placeholder){
position: absolute; position: absolute;
top: 0; top: 0;
@ -90,15 +98,18 @@ div:has(.placeholder){
} }
.unblur#image{ .unblur#image{
filter: blur(0px) !important; filter: blur(0px) !important;
opacity: 1;
} }
</style> </style>
<section class="section"> <section class="section">
<figure class="image-container"> <figure class="image-container">
<div> <div>
<div class=placeholder style="background-image:url({placeholder_src})" > <div class=placeholder style="background-image:url({placeholder_src})" >
<div class=placeholder_blur>
<img class:unblur={isloaded} id=image {src} on:load={() => isloaded=true} alt=""/> <img class:unblur={isloaded} id=image {src} on:load={() => isloaded=true} alt=""/>
</div> </div>
</div> </div>
</div>
</figure> </figure>
<div class=content><slot></slot></div> <div class=content><slot></slot></div>
</section> </section>