recipes: drop opacity transition from TitleImgParallax hero image
All checks were successful
CI / update (push) Successful in 1m30s
All checks were successful
CI / update (push) Successful in 1m30s
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:
@@ -3,14 +3,9 @@
|
||||
|
||||
let { src, color = '', alt = "", children } = $props();
|
||||
|
||||
let isloaded = $state(false);
|
||||
let isredirected = $state(false);
|
||||
|
||||
onMount(() => {
|
||||
const el = document.querySelector("img")
|
||||
if(el?.complete){
|
||||
isloaded = true
|
||||
}
|
||||
fetch(src, { method: 'HEAD' })
|
||||
.then(response => {
|
||||
isredirected = response.redirected
|
||||
@@ -21,10 +16,8 @@
|
||||
if(isredirected){
|
||||
return
|
||||
}
|
||||
if(document.querySelector("img").complete){
|
||||
document.querySelector("#img_carousel").showModal();
|
||||
}
|
||||
}
|
||||
function close_dialog_img(){
|
||||
document.querySelector("#img_carousel").close();
|
||||
}
|
||||
@@ -95,8 +88,6 @@
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: min(1000px, 100dvw);
|
||||
opacity: 0;
|
||||
transition: var(--transition-normal);
|
||||
height: max(60dvh,600px);
|
||||
object-fit: cover;
|
||||
object-position: 50% 20%;
|
||||
@@ -112,9 +103,6 @@
|
||||
:global(h1){
|
||||
width: 100%;
|
||||
}
|
||||
.unblur.image{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* DIALOG */
|
||||
dialog{
|
||||
@@ -155,13 +143,13 @@ dialog button{
|
||||
<figure class="image-container">
|
||||
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
||||
<!-- 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}>
|
||||
<img class="image" class:unblur={isloaded} {src} onload={() => {isloaded=true}} {alt}/>
|
||||
<img class="image" {src} {alt}/>
|
||||
</div>
|
||||
<noscript>
|
||||
<div class="image-wrap" style:background-color={color}>
|
||||
<img class="image unblur" {src} onload={() => {isloaded=true}} {alt}/>
|
||||
<img class="image" {src} {alt}/>
|
||||
</div>
|
||||
</noscript>
|
||||
</div>
|
||||
@@ -170,7 +158,7 @@ dialog button{
|
||||
</section>
|
||||
|
||||
<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}>
|
||||
<Cross fill=white width=2rem height=2rem></Cross>
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user