flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Use a picture element for Location illustration

Browse Source 
Probably better for performances
This commit is contained in:
Félix Péault
2021-11-21 16:50:24 +01:00
parent 8759477b79
commit 8d487e0ef7
2 changed files with 19 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/routes/[country]/[location]/index.svelte
View File

@@ -249,16 +249,19 @@
</div>
</div>
<div class="location-page__illustration"
style="
--illus-desktop: url({getAssetUrlKey(hasIllustration && location.illustration_desktop.id, 'illustration-desktop-1x')});
--illus-desktop-2x: url({getAssetUrlKey(hasIllustration && location.illustration_desktop_2x.id, 'illustration-desktop-2x')});
--illus-mobile: url({getAssetUrlKey(hasIllustration && location.illustration_mobile.id, 'illustration-mobile')});
--parallax-y: {illustrationOffsetY}px;
"
>
<div />
</div>
{#if location.illustration_mobile && location.illustration_desktop && location.illustration_desktop_2x}
<picture class="location-page__illustration" style="--parallax-y: {illustrationOffsetY}px;">
<source media="(min-width: 1200px)" srcset={getAssetUrlKey(location.illustration_desktop_2x.id, 'illustration-desktop-2x')}>
<source media="(min-width: 768px)" srcset={getAssetUrlKey(location.illustration_desktop.id, 'illustration-desktop-1x')}>
<img
src={getAssetUrlKey(location.illustration_mobile.id, 'illustration-mobile')}
width={320}
height={824}
alt="Illustration for {location.name}"
loading="lazy"
/>
</picture>
{/if}
</section>
{#if photos.length}

17
src/style/pages/_location.scss
View File

@@ -161,21 +161,16 @@
overflow: hidden;
transform-origin: top center;
div {
img {
display: block;
width: 100%;
height: 100%;
background: 0 0 var(--illus-mobile) no-repeat;
background-size: 100% auto;
height: auto;
object-fit: contain;
pointer-events: none;
user-select: none;
transform: translate3d(0, var(--parallax-y), 0);
transition: transform 0.7s var(--ease-quart);
will-change: transform, opacity;
@include bp (sm) {
background-image: var(--illus-desktop);
}
@include bp (xl) {
background-image: var(--illus-desktop-2x);
}
}
}