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

recipes: drop opacity transition from TitleImgParallax hero image
All checks were successful
CI / update (push) Successful in 1m30s
Details

Browse Source 
Remove the opacity 0→1 fade-in transition — it's annoying when the
image is already cached. The dominant color background handles the
loading state, so no transition needed.
This commit is contained in:
Alexander Bocken
2026-02-17 18:33:03 +01:00
parent d0a01a75e7
commit f074c0af08
1 changed files with 5 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/lib/components/recipes/TitleImgParallax.svelte
View File

@@ -3,14 +3,9 @@
let { src, color = '', alt = "", children } = $props(); let { src, color = '', alt = "", children } = $props();
let isloaded = $state(false);
let isredirected = $state(false); let isredirected = $state(false);
onMount(() => { onMount(() => {
const el = document.querySelector("img")
if(el?.complete){
isloaded = true
}
fetch(src, { method: 'HEAD' }) fetch(src, { method: 'HEAD' })
.then(response => { .then(response => {
isredirected = response.redirected isredirected = response.redirected
@@ -21,9 +16,7 @@
if(isredirected){ if(isredirected){
return return
} }
if(document.querySelector("img").complete){ document.querySelector("#img_carousel").showModal();
document.querySelector("#img_carousel").showModal();
}
} }
function close_dialog_img(){ function close_dialog_img(){
document.querySelector("#img_carousel").close(); document.querySelector("#img_carousel").close();
@@ -95,8 +88,6 @@
position: absolute; position: absolute;
top: 0; top: 0;
width: min(1000px, 100dvw); width: min(1000px, 100dvw);
opacity: 0;
transition: var(--transition-normal);
height: max(60dvh,600px); height: max(60dvh,600px);
object-fit: cover; object-fit: cover;
object-position: 50% 20%; object-position: 50% 20%;
@@ -112,9 +103,6 @@
:global(h1){ :global(h1){
width: 100%; width: 100%;
} }
.unblur.image{
opacity: 1;
}
/* DIALOG */ /* DIALOG */
dialog{ dialog{
@@ -155,13 +143,13 @@ dialog button{
<figure class="image-container"> <figure class="image-container">
<!-- svelte-ignore a11y_click_events_have_key_events --> <!-- svelte-ignore a11y_click_events_have_key_events -->
<!-- svelte-ignore a11y_no_static_element_interactions --> <!-- svelte-ignore a11y_no_static_element_interactions -->
<div class:zoom-in={isloaded && !isredirected} onclick={show_dialog_img}> <div class:zoom-in={!isredirected} onclick={show_dialog_img}>
<div class="image-wrap" style:background-color={color}> <div class="image-wrap" style:background-color={color}>
<img class="image" class:unblur={isloaded} {src} onload={() => {isloaded=true}} {alt}/> <img class="image" {src} {alt}/>
</div> </div>
<noscript> <noscript>
<div class="image-wrap" style:background-color={color}> <div class="image-wrap" style:background-color={color}>
<img class="image unblur" {src} onload={() => {isloaded=true}} {alt}/> <img class="image" {src} {alt}/>
</div> </div>
</noscript> </noscript>
</div> </div>
@@ -170,7 +158,7 @@ dialog button{
</section> </section>
<dialog id=img_carousel> <dialog id=img_carousel>
<img class:unblur={isloaded} {src} {alt}> <img {src} {alt}>
<button class=action_button onkeydown={(event) => do_on_key(event, 'Enter', false, close_dialog_img)} onclick={close_dialog_img}> <button class=action_button onkeydown={(event) => do_on_key(event, 'Enter', false, close_dialog_img)} onclick={close_dialog_img}>
<Cross fill=white width=2rem height=2rem></Cross> <Cross fill=white width=2rem height=2rem></Cross>
</button> </button>