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

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

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