72 lines
1.9 KiB
Svelte
72 lines
1.9 KiB
Svelte
<style lang="scss">
|
|
:global(.scrolling-title) {
|
|
transform: translate3d(var(--parallax-x), 0, 0);
|
|
transition: transform 1.2s var(--ease-quart);
|
|
will-change: transform;
|
|
}
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import { map } from '$utils/functions'
|
|
import reveal from '$animations/reveal'
|
|
|
|
export let tag: string
|
|
export let label: string = undefined
|
|
export let parallax: number = undefined
|
|
export let offsetStart: number = undefined
|
|
export let offsetEnd: number = undefined
|
|
export let animate: boolean = true
|
|
|
|
let scrollY: number
|
|
let innerWidth: number
|
|
let innerHeight: number
|
|
let titleEl: HTMLElement
|
|
let isLarger: boolean
|
|
|
|
// Define default values
|
|
$: if (titleEl && !offsetStart && !offsetEnd) {
|
|
offsetStart = titleEl.offsetTop - innerHeight * 0.75
|
|
offsetEnd = titleEl.offsetTop + innerHeight * 0.25
|
|
}
|
|
|
|
// Check if title is larger than viewport to translate it
|
|
$: isLarger = titleEl && titleEl.offsetWidth >= innerWidth
|
|
|
|
// Calculate the parallax value
|
|
$: if (titleEl) {
|
|
const toTranslate = 100 - innerWidth / titleEl.offsetWidth * 100
|
|
parallax = isLarger ? map(scrollY, offsetStart, offsetEnd, 0, -toTranslate, true) : 0
|
|
}
|
|
|
|
const classes = [
|
|
'scrolling-title',
|
|
'title-huge',
|
|
$$props.class
|
|
].join(' ').trim()
|
|
|
|
|
|
const revealOptions = animate ? {
|
|
children: '.char',
|
|
animation: { y: ['-105%', 0] },
|
|
options: {
|
|
stagger: 0.06,
|
|
duration: 1.6,
|
|
delay: 0.2,
|
|
threshold: 0.2,
|
|
},
|
|
} : null
|
|
</script>
|
|
|
|
<svelte:window
|
|
bind:scrollY
|
|
bind:innerWidth bind:innerHeight
|
|
/>
|
|
|
|
<svelte:element this={tag}
|
|
bind:this={titleEl}
|
|
class={classes} aria-label={label}
|
|
style:--parallax-x="{parallax}%"
|
|
use:reveal={revealOptions}
|
|
>
|
|
<slot />
|
|
</svelte:element> |