Omer/youtuber-blog-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

waitlist page

Browse Source
This commit is contained in:
Omer Sabic 2024-05-14 23:45:41 +02:00
parent b010ec4349
commit d520ed620c
2 changed files with 38 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/lib/components/molecules/FadingText.svelte
View File

@ -1,13 +1,33 @@
<script>
export let winHeight;
export let scrollY;
/** @type {HTMLElement} */
let el;
export let winHeight;
export let scrollY;
/** @type {HTMLElement} */
let el;
/** @type {string} */
let style = '';
const minVal = 0.7
$: {
if (el && scrollY) {
const rect = el.getBoundingClientRect();
const elementCenterY = rect.top + rect.height / 2;
$: {
if(el) console.log(el.getBoundingClientRect())
console.log(scrollY)
}
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>
<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>

21
src/routes/+page.svelte
View File

@ -8,7 +8,7 @@
import { writable } from 'svelte/store';
const isDesktop = mediaQuery('(min-width: 1024px)');
let scrollY;
let scrollY = 0;
/**
* @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>
<div class="bg-neutral-950">
@ -69,13 +62,17 @@
</div>
</div>
{#if $isDesktop}
<!-- <BackgroundBeams /> -->
<BackgroundBeams />
{/if}
</div>
<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>
<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>