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" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
%sveltekit.head%
|
%sveltekit.head%
|
||||||
</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>
|
<div style="display: contents">%sveltekit.body%</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</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>
|
<script>
|
||||||
import '../app.pcss';
|
import '../app.pcss';
|
||||||
import BackgroundBeams from '$lib/components/molecules/BackgroundBeams.svelte';
|
import BackgroundBeams from '$lib/components/molecules/BackgroundBeams.svelte';
|
||||||
|
import FadingText from '$lib/components/molecules/FadingText.svelte';
|
||||||
import { mediaQuery } from 'svelte-legos';
|
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)');
|
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>
|
</script>
|
||||||
|
|
||||||
|
<div class="bg-neutral-950">
|
||||||
<div
|
<div
|
||||||
class="relative flex h-screen w-full flex-col items-center justify-center bg-neutral-950 antialiased lg:px-32"
|
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">
|
<div class="mx-auto max-w-2xl p-4">
|
||||||
<h2
|
<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"
|
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
|
Join the waitlist
|
||||||
</h2>
|
</h2>
|
||||||
<p></p>
|
<p></p>
|
||||||
<p class="relative z-10 mx-auto my-2 max-w-lg text-center text-sm text-neutral-500">
|
<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
|
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.
|
blog website. Sign up to our waitlist to get notified when we launch and earn some free
|
||||||
|
goodies as well.
|
||||||
</p>
|
</p>
|
||||||
<div class="flex flex-row gap-2 text-gray-50 pt-4">
|
<div class="flex flex-row gap-2 pt-4 text-gray-50">
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="hi@example.com"
|
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"
|
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">
|
<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
|
Join Waitlist
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{#if $isDesktop}
|
{#if $isDesktop}
|
||||||
<BackgroundBeams />
|
<!-- <BackgroundBeams /> -->
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</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>
|
||||||
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user