diff --git a/src/app.html b/src/app.html index 456e4c4..81981d8 100644 --- a/src/app.html +++ b/src/app.html @@ -15,5 +15,9 @@
%svelte.body%
+ + \ No newline at end of file diff --git a/src/components/atoms/ScrollingTitle.svelte b/src/components/atoms/ScrollingTitle.svelte index 6fc3c81..ffc9492 100644 --- a/src/components/atoms/ScrollingTitle.svelte +++ b/src/components/atoms/ScrollingTitle.svelte @@ -5,19 +5,32 @@ export let tag: string export let label: string = undefined export let parallax: number = undefined - export let offset: number = 0 + 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 - $: if (titleEl) { - const start = titleEl.offsetTop + offset - const end = titleEl.offsetTop + (titleEl.offsetHeight + offset) * 0.9 - parallax = map(scrollY, start, end, 0, 1, true) + // Define default values + $: if (titleEl && !offsetStart && !offsetEnd) { + offsetStart = titleEl.offsetTop - innerHeight * 0.75 + offsetEnd = titleEl.offsetTop + innerHeight * 0.25 } - const classes = [ + // 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 + } + + $: classes = [ 'scrolling-title', 'title-huge', $$props.class @@ -38,20 +51,31 @@ } : {} - + {#if tag === 'h1'}

+{:else if tag === 'h2'} +

+ +

{:else if tag === 'p'}

diff --git a/src/routes/index.svelte b/src/routes/index.svelte index 02628d4..3203b36 100644 --- a/src/routes/index.svelte +++ b/src/routes/index.svelte @@ -1,9 +1,10 @@ @@ -91,7 +82,8 @@ tag="h1" class="homepage__title--houses" label="Houses of the World" - offsetTop={100} + offsetStart={-300} + offsetEnd={400} > @@ -150,11 +142,7 @@

- + @@ -205,4 +193,4 @@ } } } - + \ No newline at end of file diff --git a/src/style/atoms/_scrolling-title.scss b/src/style/atoms/_scrolling-title.scss index 2753ca2..22c7cb5 100644 --- a/src/style/atoms/_scrolling-title.scss +++ b/src/style/atoms/_scrolling-title.scss @@ -1,5 +1,5 @@ .scrolling-title { - transform: translate3d(calc(-1px * var(--parallax-x) * 100), 0, 0); + transform: translate3d(var(--parallax-x), 0, 0); transition: transform 1.2s var(--ease-quart); will-change: transform; } \ No newline at end of file diff --git a/src/utils/functions/index.ts b/src/utils/functions/index.ts index 6d28ed0..bd1f1a3 100644 --- a/src/utils/functions/index.ts +++ b/src/utils/functions/index.ts @@ -56,6 +56,14 @@ export const capitalizeFirstLetter = (string: string) => { } +/** + * Create a delay + */ +export function sleep (milliseconds: number) { + return new Promise(resolve => setTimeout(resolve, milliseconds)) +} + + /** * Linear Interpolation */