faded as a hoe
This commit is contained in:
parent
193113e029
commit
b010ec4349
@ -6,7 +6,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover" style="height: 100vh">
|
||||
<body data-sveltekit-preload-data="hover" style="min-height: 100vh">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
13
src/lib/components/molecules/FadingText.svelte
Normal file
13
src/lib/components/molecules/FadingText.svelte
Normal file
@ -0,0 +1,13 @@
|
||||
<script>
|
||||
export let winHeight;
|
||||
export let scrollY;
|
||||
/** @type {HTMLElement} */
|
||||
let el;
|
||||
|
||||
$: {
|
||||
if(el) console.log(el.getBoundingClientRect())
|
||||
console.log(scrollY)
|
||||
}
|
||||
</script>
|
||||
|
||||
<h2 bind:this={el} class="fading mt-48 snap-center">i fucking made you fade</h2>
|
||||
67
src/lib/components/molecules/StickyScrollReveal.svelte
Normal file
67
src/lib/components/molecules/StickyScrollReveal.svelte
Normal file
@ -0,0 +1,67 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let activeCard = 0;
|
||||
let backgroundColors = ['var(--slate-900)', 'var(--black)', 'var(--neutral-900)'];
|
||||
let linearGradients = [
|
||||
'linear-gradient(to bottom right, var(--cyan-500), var(--emerald-500))',
|
||||
'linear-gradient(to bottom right, var(--pink-500), var(--indigo-500))',
|
||||
'linear-gradient(to bottom right, var(--orange-500), var(--yellow-500))'
|
||||
];
|
||||
let scrollYProgress = 0;
|
||||
|
||||
export let content: { title: string; description: string }[] = [
|
||||
{ title: 'Title 1', description: 'Description 1' },
|
||||
{ title: 'Title 2', description: 'Description 2' }
|
||||
// Add more items as needed
|
||||
];
|
||||
|
||||
let ref: HTMLDivElement;
|
||||
|
||||
onMount(() => {
|
||||
const handleScroll = (event: Event) => {
|
||||
const target = event.target as HTMLElement;
|
||||
scrollYProgress = target.scrollTop / target.scrollHeight;
|
||||
const cardsBreakpoints = content.map((_, index) => index / content.length);
|
||||
|
||||
cardsBreakpoints.forEach((breakpoint, index) => {
|
||||
if (scrollYProgress > breakpoint - 0.2 && scrollYProgress <= breakpoint) {
|
||||
activeCard = index;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
ref.addEventListener('scroll', handleScroll);
|
||||
|
||||
return () => {
|
||||
ref.removeEventListener('scroll', handleScroll);
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<div
|
||||
bind:this={ref}
|
||||
class="relative flex h-[30rem] justify-center space-x-10 overflow-y-auto rounded-md p-10 transition ease-in-out"
|
||||
>
|
||||
<div class="div relative flex items-start px-4">
|
||||
<div class="w-full">
|
||||
{#each content as item, index (item.title + index)}
|
||||
<div class="my-20">
|
||||
<h2
|
||||
style="opacity: {activeCard === index ? 1 : 0.3}"
|
||||
class="text-2xl font-bold text-slate-100"
|
||||
>
|
||||
{item.title}
|
||||
</h2>
|
||||
<p
|
||||
style="opacity: {activeCard === index ? 1 : 0.3}"
|
||||
class="text-kg mt-10 max-w-sm text-slate-300"
|
||||
>
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
{/each}
|
||||
<div class="h-40" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,39 +1,81 @@
|
||||
<script>
|
||||
import '../app.pcss';
|
||||
import BackgroundBeams from '$lib/components/molecules/BackgroundBeams.svelte';
|
||||
import FadingText from '$lib/components/molecules/FadingText.svelte';
|
||||
import { mediaQuery } from 'svelte-legos';
|
||||
import { onMount } from 'svelte';
|
||||
import { browser } from '$app/environment';
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
const isDesktop = mediaQuery('(min-width: 1024px)');
|
||||
let scrollY;
|
||||
/**
|
||||
* @type {number}
|
||||
*/
|
||||
let winHeight;
|
||||
onMount(() => {
|
||||
if (browser) {
|
||||
winHeight = window.innerHeight;
|
||||
window.onscroll = (e) => {
|
||||
// const fadingEls = [...document.getElementsByClassName('fading')];
|
||||
|
||||
// for (let i in fadingEls) {
|
||||
// let el = fadingEls[i];
|
||||
// const distFromCenter =
|
||||
// window.innerHeight / 2 - el.getBoundingClientRect().top - el.clientHeight;
|
||||
// values[i].set(distFromCenter);
|
||||
// }
|
||||
scrollY = window.scrollY;
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* @type {import('svelte/store').Writable<number>[]}
|
||||
*/
|
||||
let values = [writable(1), writable(1), writable(1), writable(1), writable(1)];
|
||||
|
||||
$: console.log(values);
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="relative flex h-screen w-full flex-col items-center justify-center bg-neutral-950 antialiased lg:px-32"
|
||||
>
|
||||
<div class="mx-auto max-w-2xl p-4">
|
||||
<h2
|
||||
class="relative z-10 bg-gradient-to-b mb-6 from-neutral-200 to-neutral-600 bg-clip-text text-center font-sans text-3xl font-bold text-transparent md:text-7xl"
|
||||
>
|
||||
Join the waitlist
|
||||
</h2>
|
||||
<p></p>
|
||||
<p class="relative z-10 mx-auto my-2 max-w-lg text-center text-sm text-neutral-500">
|
||||
Welcome to ExampleSaaS, the best solution for converting your video content into an engaging
|
||||
blog website. Sign up to our waitlist to get notified when we launch and earn some free goodies as well.
|
||||
</p>
|
||||
<div class="flex flex-row gap-2 text-gray-50 pt-4">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="hi@example.com"
|
||||
class="relative z-10 w-full rounded-lg border border-neutral-800 bg-neutral-950 p-2 placeholder:text-neutral-700 focus:ring-2 focus:ring-teal-500"
|
||||
/>
|
||||
|
||||
<button class="relative z-10 inline-flex h-10 w-52 animate-shimmer items-center justify-center rounded-md border border-slate-800 bg-[linear-gradient(110deg,#000103,45%,#1e2631,55%,#000103)] bg-[length:200%_100%] px-6 font-medium text-slate-400 transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50">
|
||||
Join Waitlist
|
||||
</button>
|
||||
<div class="bg-neutral-950">
|
||||
<div
|
||||
class="relative flex h-screen w-full flex-col items-center justify-center bg-neutral-950 antialiased lg:px-32"
|
||||
>
|
||||
<div class="mx-auto max-w-2xl p-4">
|
||||
<h2
|
||||
class="relative z-10 mb-6 bg-gradient-to-b from-neutral-200 to-neutral-600 bg-clip-text text-center font-sans text-3xl font-bold text-transparent md:text-7xl"
|
||||
>
|
||||
Join the waitlist
|
||||
</h2>
|
||||
<p></p>
|
||||
<p class="relative z-10 mx-auto my-2 max-w-lg text-center text-sm text-neutral-500">
|
||||
Welcome to ExampleSaaS, the best solution for converting your video content into an engaging
|
||||
blog website. Sign up to our waitlist to get notified when we launch and earn some free
|
||||
goodies as well.
|
||||
</p>
|
||||
<div class="flex flex-row gap-2 pt-4 text-gray-50">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="hi@example.com"
|
||||
class="relative z-10 w-full rounded-lg border border-neutral-800 bg-neutral-950 p-2 placeholder:text-neutral-700 focus:ring-2 focus:ring-teal-500"
|
||||
/>
|
||||
|
||||
<button
|
||||
class="animate-shimmer relative z-10 inline-flex h-10 w-52 items-center justify-center rounded-md border border-slate-800 bg-[linear-gradient(110deg,#000103,45%,#1e2631,55%,#000103)] bg-[length:200%_100%] px-6 font-medium text-slate-400 transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50"
|
||||
>
|
||||
Join Waitlist
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{#if $isDesktop}
|
||||
<!-- <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>
|
||||
</div>
|
||||
{#if $isDesktop}
|
||||
<BackgroundBeams />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user