42 lines
1.1 KiB
Svelte
42 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>
|