51 lines
1.3 KiB
Svelte
51 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import ScrollerBase from '../../ScrollerBase/ScrollerBase.svelte';
|
|
import Lottie from '../Lottie.svelte';
|
|
import LottieSample from '../lottie/themesLottie.lottie?url';
|
|
|
|
// Optional: Bind your own variables to use them in your code.
|
|
let count = $state(1);
|
|
let index = $state(0);
|
|
let offset = $state(0);
|
|
let progress = $state(0);
|
|
let top = $state(0);
|
|
let threshold = $state(0.5);
|
|
let bottom = $state(1);
|
|
</script>
|
|
|
|
<ScrollerBase
|
|
{top}
|
|
{threshold}
|
|
{bottom}
|
|
bind:count
|
|
bind:index
|
|
bind:offset
|
|
bind:progress
|
|
query="div.step-foreground-container"
|
|
>
|
|
{#snippet backgroundSnippet()}
|
|
<Lottie src={LottieSample} {progress} showDebugInfo />
|
|
{/snippet}
|
|
{#snippet foregroundSnippet()}
|
|
<div class="step-foreground-container"><h3>Step 1</h3></div>
|
|
<div class="step-foreground-container"><h3>Step 2</h3></div>
|
|
<div class="step-foreground-container"><h3>Step 3</h3></div>
|
|
<div class="step-foreground-container"><h3>Step 4</h3></div>
|
|
<div class="step-foreground-container"><h3>Step 5</h3></div>
|
|
{/snippet}
|
|
</ScrollerBase>
|
|
|
|
<style lang="scss">
|
|
@use '../../../scss/mixins' as mixins;
|
|
|
|
.step-foreground-container {
|
|
height: 100lvh;
|
|
width: 50%;
|
|
margin: 0 auto;
|
|
|
|
h3 {
|
|
background-color: antiquewhite;
|
|
text-align: center;
|
|
}
|
|
}
|
|
</style>
|