48 lines
No EOL
1.1 KiB
Svelte
48 lines
No EOL
1.1 KiB
Svelte
<script lang="ts">
|
|
import ScrollerSquash from '@components/ScrollerAnimate/ScrollerAnimate.svelte';
|
|
|
|
// Types
|
|
import type {
|
|
ContainerWidth,
|
|
ForegroundPosition,
|
|
} from '@components/@types/global';
|
|
|
|
type Graphic = {
|
|
src: string;
|
|
srcset: string;
|
|
alt: string;
|
|
title?: string;
|
|
description?: string;
|
|
notes?: string;
|
|
width?: ContainerWidth;
|
|
};
|
|
|
|
interface Props {
|
|
graphics: Graphic[];
|
|
/** Duration of the animation, milliseconds **/
|
|
animationDuration?: number;
|
|
/** The moment when the animation is at its peak.
|
|
** It is here that we transition between steps and swap the graphic. 0-1 **/
|
|
animationPeak?: number;
|
|
/** Width of the background */
|
|
backgroundWidth?: ContainerWidth;
|
|
/** Position of the foreground */
|
|
foregroundPosition?: ForegroundPosition;
|
|
}
|
|
|
|
let {
|
|
graphics,
|
|
backgroundWidth = 'fluid',
|
|
foregroundPosition = 'middle',
|
|
animationDuration = 350,
|
|
animationPeak = 0.8,
|
|
}: Props = $props();
|
|
</script>
|
|
|
|
<ScrollerSquash
|
|
{graphics}
|
|
{animationDuration}
|
|
{animationPeak}
|
|
{backgroundWidth}
|
|
{foregroundPosition}
|
|
/> |