starred/reiverr
1
0
Fork 0
mirror of https://github.com/aleksilassila/reiverr.git synced 2026-04-18 03:53:14 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: Alternative background image animation for chrome & tv, fix: Adjust margins

Browse Source
This commit is contained in:
Aleksi Lassila
2024-04-03 02:17:31 +03:00
parent 96076aeebc
commit 27fa492d8d
4 changed files with 42 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/lib/components/HeroCarousel/HeroBackground.svelte
View File

@@ -1,4 +1,8 @@
<script lang="ts">
import { PLATFORM_TV } from '../../constants';
import { fade } from 'svelte/transition';
import { cubicIn, cubicOut } from 'svelte/easing';
export let urls: Promise<string[]>;
export let index: number;
@@ -11,24 +15,41 @@
</script>
<div class="absolute inset-0">
<div
class="flex overflow-hidden h-full w-full"
style="perspective: 1px; -webkit-perspective: 1px;"
>
{#if PLATFORM_TV}
{#await urls then urls}
{#each urls as url, i}
{#key index}
<div
class="w-full h-full flex-shrink-0 basis-auto relative"
style="transform-style: preserve-3d; -webkit-transform-style: preserve-3d; overflow: hidden;"
bind:this={htmlElements[i]}
>
<div
class="w-full h-full flex-shrink-0 basis-auto bg-center bg-cover absolute inset-0"
style={`background-image: url('${url}'); transform: translateZ(-5px) scale(6); -webkit-transform: translateZ(-5px) scale(6);`}
/>
</div>
{/each}
class="absolute inset-0 bg-center bg-cover"
style={`background-image: url('${urls[index]}');`}
in:fade={{ delay: 700, duration: 500, easing: cubicIn }}
out:fade={{ delay: 0, duration: 500, easing: cubicOut }}
/>
<div class="bg-gradient-to-t from-stone-950 to-transparent absolute inset-0" />
{/key}
{/await}
</div>
<div class="bg-gradient-to-t from-stone-950 to-transparent absolute inset-0" />
{:else}
<div
class="flex overflow-hidden h-full w-full"
style="perspective: 1px; -webkit-perspective: 1px;"
>
{#await urls then urls}
{#each urls as url, i}
<div
class="w-full h-full flex-shrink-0 basis-auto relative"
style="transform-style: preserve-3d; -webkit-transform-style: preserve-3d; overflow: hidden;"
bind:this={htmlElements[i]}
>
<div
class="w-full h-full flex-shrink-0 basis-auto bg-center bg-cover absolute inset-0"
style={`background-image: url('${url}'); ${
!PLATFORM_TV &&
'transform: translateZ(-5px) scale(6); -webkit-transform: translateZ(-5px) scale(6);'
}`}
/>
</div>
{/each}
{/await}
</div>
<div class="bg-gradient-to-t from-stone-950 to-transparent absolute inset-0" />
{/if}
</div>