Update effects

src/lib/components/PeopleList.svelte

@@ -27,7 +27,7 @@
 				><img src="/people/{item.img}" class="grayscale invert aspect-square object-cover w-full" /></a
 			>
 		</div>
-		<div class="mt-4 speaker-name animate-speaker">{item.name}</div>
+		<div class="mt-4 speaker-name animate-speaker">{item.name.toUpperCase()}</div>
 		<div class="text-base text-mild">
 			<a href={twitterLink(item.twitter)} class="hover:underline animate-speaker">@{item.twitter}</a>
 		</div>

src/lib/helpers.js

@@ -13,7 +13,7 @@ export function rand(length) {
     return result;
 }
 
-export function animateText (ev) {
+export function animateText (ev, interval = 50) {
     if (!ev.target.getAttribute('data-text')) {
         ev.target.setAttribute('data-text', ev.target.innerHTML)
     }
@@ -21,7 +21,7 @@ export function animateText (ev) {
         return;
     }
     ev.target.setAttribute('data-animate', "1")
-    const orig = removeMd(ev.target.getAttribute('data-text'))
+    const orig = removeMd(ev.target.getAttribute('data-text')).replace('&', '&')
     const steps = orig.length
 
     const genRand = (pos = 0, len = null) => orig.substring(pos, len).split(' ').map(x => rand(x.length)).join(' ')
@@ -37,6 +37,6 @@ export function animateText (ev) {
             if (i === steps) {
                 ev.target.setAttribute('data-animate', "0")
             }
-        }, 50*i)
+        }, interval * i)
     }
 }

src/routes/+layout.svelte

@@ -9,11 +9,13 @@
   	let navbar = false;
 
 	const menu = [
+		{ title: 'Homepage', url: '', hidden: true },
 		{ title: 'About', url: '#about' },
 		{ title: 'Speakers', url: '#speakers' },
 		{ title: 'Program', url: '#program' },
 		{ title: 'Sponsors', url: '#sponsors' },
-		{ title: 'Ticket', url: '#ticket', class: 'button' }
+		{ title: 'Ticket', url: '#ticket', class: 'button' },
+		{ title: 'FAQ', url: '#faq', hidden: true }
 	];
 
 	onMount(async () => {
@@ -23,6 +25,40 @@
 				animateText({ target: el })
 			}
 		}, 0)
+
+		let lastScrollTop = null
+
+		setInterval(() => {
+			const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
+			if (lastScrollTop === scrollTop) {
+				return null;
+			} else {
+				lastScrollTop = scrollTop
+			}
+			console.log('x')
+			const arr = []
+			for (const mi of menu) {
+				const el = document.getElementById(mi.title.toLowerCase())
+				const pos = el.getBoundingClientRect()
+				//console.log(mi.title, pos.top, pos.bottom)
+				if (pos.top <= 100 && pos.bottom > 100) {
+					arr.push([ mi, pos.top, pos.bottom ])
+				}
+			}
+			const choosed = arr[arr.length-1]
+			if (choosed) {
+				//console.log('choosed = ', choosed[0].title)
+				const currentHash = window.location.hash
+				const hash = choosed[0].url
+				if (hash !== currentHash) {
+					if (hash === '') {
+						history.replaceState(null, null, ' ');
+					} else {
+						history.replaceState(null, null, hash);
+					}
+				}
+			}
+		}, 1000)
 	});
 
 </script>
@@ -39,7 +75,7 @@
 				</div>
 				<div class="flex items-center gap-6 text-xl">
           			<button class="md:hidden text-3xl" on:click={() => navbar = !navbar}>☰</button>
-					{#each menu as mi}
+					{#each menu.filter(i => !i.hidden) as mi}
 						<div class="hidden md:block"><a class="{mi.class ? mi.class : 'hover:underline'}" href={mi.url} on:mouseenter={animateText}>{mi.title.toUpperCase()}</a></div>
 					{/each}
 				</div>
@@ -56,7 +92,7 @@
 		{/if}
 	</div>
 
-	<div class="w-full h-screen">
+	<div class="w-full h-screen" id="homepage">
 		<div class="w-full h-full flex items-center text-center">
 			<div class="mx-auto px-4">
 				<div class="text-5xl md:text-8xl font-bold mb-4 md:mb-8 animation-crypt">

src/routes/+page.svelte

@@ -4,6 +4,12 @@
 	import { animateText } from '$lib/helpers';
 
 	export let data;
+
+	function animateTopic (el) {
+		for(const e of el.target.getElementsByClassName('animate-topic')) {
+			animateText({ target: e })
+		}
+	}
 </script>
 
 <svelte:head>
@@ -24,8 +30,8 @@
 		<div class="section-header">Key themes</div>
 		<div class="grid md:grid-cols-3 gap-4 md:gap-10">
 			{#each data.config.themes as ti}
-				<div class="bg-[#0d1117] hover:text-black hover:bg-white px-4 py-6">
-					<div class="text-2xl uppercase">{ti.title}</div>
+				<div class="bg-[#0d1117] hover:text-black hover:bg-white px-4 py-6" on:mouseenter={animateTopic}>
+					<div class="text-2xl animate-topic">{ti.title.toUpperCase()}</div>
 					<div class="mt-4 text-lg markdown">
 						<SvelteMarkdown source={ti.desc} />
 					</div>