waitlist page
This commit is contained in:
parent
b010ec4349
commit
d520ed620c
@ -3,11 +3,31 @@
|
|||||||
export let scrollY;
|
export let scrollY;
|
||||||
/** @type {HTMLElement} */
|
/** @type {HTMLElement} */
|
||||||
let el;
|
let el;
|
||||||
|
/** @type {string} */
|
||||||
|
let style = '';
|
||||||
|
const minVal = 0.7
|
||||||
$: {
|
$: {
|
||||||
if(el) console.log(el.getBoundingClientRect())
|
if (el && scrollY) {
|
||||||
console.log(scrollY)
|
const rect = el.getBoundingClientRect();
|
||||||
|
const elementCenterY = rect.top + rect.height / 2;
|
||||||
|
|
||||||
|
const viewportCenterY = winHeight / 2;
|
||||||
|
const distanceY = Math.abs(elementCenterY - viewportCenterY);
|
||||||
|
const maxDistanceY = winHeight / 2;
|
||||||
|
|
||||||
|
// Normalize distance to get scale value between minVal and 1
|
||||||
|
const normalizedDistanceY = distanceY / maxDistanceY;
|
||||||
|
const scale = 1 - normalizedDistanceY * (1 - minVal);
|
||||||
|
console.log(scale)
|
||||||
|
const cappedScale = Math.max(scale, minVal);
|
||||||
|
style = `transform: scale3d(${cappedScale}, ${cappedScale}, ${cappedScale})`;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let className;
|
||||||
|
export {className as class}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<h2 bind:this={el} class="fading mt-48 snap-center">i fucking made you fade</h2>
|
<div {style} class={className}>
|
||||||
|
<h2 bind:this={el}><slot /></h2>
|
||||||
|
</div>
|
||||||
|
@ -8,7 +8,7 @@
|
|||||||
import { writable } from 'svelte/store';
|
import { writable } from 'svelte/store';
|
||||||
|
|
||||||
const isDesktop = mediaQuery('(min-width: 1024px)');
|
const isDesktop = mediaQuery('(min-width: 1024px)');
|
||||||
let scrollY;
|
let scrollY = 0;
|
||||||
/**
|
/**
|
||||||
* @type {number}
|
* @type {number}
|
||||||
*/
|
*/
|
||||||
@ -29,13 +29,6 @@
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
/**
|
|
||||||
* @type {import('svelte/store').Writable<number>[]}
|
|
||||||
*/
|
|
||||||
let values = [writable(1), writable(1), writable(1), writable(1), writable(1)];
|
|
||||||
|
|
||||||
$: console.log(values);
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="bg-neutral-950">
|
<div class="bg-neutral-950">
|
||||||
@ -69,13 +62,17 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{#if $isDesktop}
|
{#if $isDesktop}
|
||||||
<!-- <BackgroundBeams /> -->
|
<BackgroundBeams />
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<div class="text-center text-7xl text-white">
|
<div class="text-center text-7xl text-white">
|
||||||
<FadingText {winHeight} {scrollY} />
|
|
||||||
<h2 class="fading mt-48 snap-center">i fucking made you</h2>
|
|
||||||
<h2 class="fading mt-48 snap-center">i fucking made you</h2>
|
|
||||||
<h2 class="fading mt-48 snap-center">i fucking made you</h2>
|
<h2 class="fading mt-48 snap-center">i fucking made you</h2>
|
||||||
|
<FadingText class="fading my-64 snap-center" {winHeight} {scrollY}>Convert Your Videos To Blogs</FadingText>
|
||||||
|
<FadingText class="fading mt-48 snap-center" {winHeight} {scrollY}>Get More Subscribers</FadingText>
|
||||||
|
<FadingText class="fading my-64 snap-center" {winHeight} {scrollY}>Engage Your Existing Viewerbase</FadingText>
|
||||||
|
<FadingText class="fading my-64 snap-center" {winHeight} {scrollY}>Collect Viewers' Emails</FadingText>
|
||||||
|
<FadingText class="fading my-64 snap-center" {winHeight} {scrollY}>Get A Good Looking Website</FadingText>
|
||||||
|
<FadingText class="fading my-64 snap-center" {winHeight} {scrollY}>Collect Analytics</FadingText>
|
||||||
|
<FadingText class="fading my-64 snap-center" {winHeight} {scrollY}>Profit</FadingText>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user