47 lines
1.1 KiB
Svelte
47 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import type { ScrollerStep } from '../@types/global';
|
|
|
|
interface Props {
|
|
index: number;
|
|
steps?: ScrollerStep[];
|
|
preload?: number;
|
|
stackBackground?: boolean;
|
|
}
|
|
|
|
let {
|
|
index,
|
|
steps = [],
|
|
preload = 1,
|
|
stackBackground = true,
|
|
}: Props = $props();
|
|
</script>
|
|
|
|
{#each steps as step, i}
|
|
<!-- Load the step(s) before and after the active one, only -->
|
|
<!-- Unless stackBackground is true. If so, keep all steps before the current one loaded. -->
|
|
{#if preload === 0 || (i >= (stackBackground ? 0 : index - preload) && i <= index + preload)}
|
|
<div
|
|
class="step-background step-{i + 1} w-full absolute"
|
|
class:visible="{stackBackground ? i <= index : i === index}"
|
|
class:invisible="{stackBackground ? i > index : i !== index}"
|
|
>
|
|
<step.background {...step.backgroundProps || {}}></step.background>
|
|
</div>
|
|
{/if}
|
|
{/each}
|
|
|
|
<style lang="scss">
|
|
.step-background {
|
|
opacity: 0;
|
|
will-change: opacity;
|
|
transition: 0.35s opacity ease;
|
|
|
|
&.visible {
|
|
opacity: 1;
|
|
}
|
|
|
|
&.invisible {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
</style>
|