mirror of
https://github.com/web3privacy/w3ps1.git
synced 2024-10-15 16:26:26 +02:00
Update effects
This commit is contained in:
parent
21e28a720c
commit
b49cad2a27
4 changed files with 51 additions and 9 deletions
|
@ -27,7 +27,7 @@
|
||||||
><img src="/people/{item.img}" class="grayscale invert aspect-square object-cover w-full" /></a
|
><img src="/people/{item.img}" class="grayscale invert aspect-square object-cover w-full" /></a
|
||||||
>
|
>
|
||||||
</div>
|
</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">
|
<div class="text-base text-mild">
|
||||||
<a href={twitterLink(item.twitter)} class="hover:underline animate-speaker">@{item.twitter}</a>
|
<a href={twitterLink(item.twitter)} class="hover:underline animate-speaker">@{item.twitter}</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -13,7 +13,7 @@ export function rand(length) {
|
||||||
return result;
|
return result;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function animateText (ev) {
|
export function animateText (ev, interval = 50) {
|
||||||
if (!ev.target.getAttribute('data-text')) {
|
if (!ev.target.getAttribute('data-text')) {
|
||||||
ev.target.setAttribute('data-text', ev.target.innerHTML)
|
ev.target.setAttribute('data-text', ev.target.innerHTML)
|
||||||
}
|
}
|
||||||
|
@ -21,7 +21,7 @@ export function animateText (ev) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
ev.target.setAttribute('data-animate', "1")
|
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 steps = orig.length
|
||||||
|
|
||||||
const genRand = (pos = 0, len = null) => orig.substring(pos, len).split(' ').map(x => rand(x.length)).join(' ')
|
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) {
|
if (i === steps) {
|
||||||
ev.target.setAttribute('data-animate', "0")
|
ev.target.setAttribute('data-animate', "0")
|
||||||
}
|
}
|
||||||
}, 50*i)
|
}, interval * i)
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -9,11 +9,13 @@
|
||||||
let navbar = false;
|
let navbar = false;
|
||||||
|
|
||||||
const menu = [
|
const menu = [
|
||||||
|
{ title: 'Homepage', url: '', hidden: true },
|
||||||
{ title: 'About', url: '#about' },
|
{ title: 'About', url: '#about' },
|
||||||
{ title: 'Speakers', url: '#speakers' },
|
{ title: 'Speakers', url: '#speakers' },
|
||||||
{ title: 'Program', url: '#program' },
|
{ title: 'Program', url: '#program' },
|
||||||
{ title: 'Sponsors', url: '#sponsors' },
|
{ title: 'Sponsors', url: '#sponsors' },
|
||||||
{ title: 'Ticket', url: '#ticket', class: 'button' }
|
{ title: 'Ticket', url: '#ticket', class: 'button' },
|
||||||
|
{ title: 'FAQ', url: '#faq', hidden: true }
|
||||||
];
|
];
|
||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
|
@ -23,6 +25,40 @@
|
||||||
animateText({ target: el })
|
animateText({ target: el })
|
||||||
}
|
}
|
||||||
}, 0)
|
}, 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>
|
</script>
|
||||||
|
@ -39,7 +75,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center gap-6 text-xl">
|
<div class="flex items-center gap-6 text-xl">
|
||||||
<button class="md:hidden text-3xl" on:click={() => navbar = !navbar}>☰</button>
|
<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>
|
<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}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
|
@ -56,7 +92,7 @@
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</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="w-full h-full flex items-center text-center">
|
||||||
<div class="mx-auto px-4">
|
<div class="mx-auto px-4">
|
||||||
<div class="text-5xl md:text-8xl font-bold mb-4 md:mb-8 animation-crypt">
|
<div class="text-5xl md:text-8xl font-bold mb-4 md:mb-8 animation-crypt">
|
||||||
|
|
|
@ -4,6 +4,12 @@
|
||||||
import { animateText } from '$lib/helpers';
|
import { animateText } from '$lib/helpers';
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
|
|
||||||
|
function animateTopic (el) {
|
||||||
|
for(const e of el.target.getElementsByClassName('animate-topic')) {
|
||||||
|
animateText({ target: e })
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
|
@ -24,8 +30,8 @@
|
||||||
<div class="section-header">Key themes</div>
|
<div class="section-header">Key themes</div>
|
||||||
<div class="grid md:grid-cols-3 gap-4 md:gap-10">
|
<div class="grid md:grid-cols-3 gap-4 md:gap-10">
|
||||||
{#each data.config.themes as ti}
|
{#each data.config.themes as ti}
|
||||||
<div class="bg-[#0d1117] hover:text-black hover:bg-white px-4 py-6">
|
<div class="bg-[#0d1117] hover:text-black hover:bg-white px-4 py-6" on:mouseenter={animateTopic}>
|
||||||
<div class="text-2xl uppercase">{ti.title}</div>
|
<div class="text-2xl animate-topic">{ti.title.toUpperCase()}</div>
|
||||||
<div class="mt-4 text-lg markdown">
|
<div class="mt-4 text-lg markdown">
|
||||||
<SvelteMarkdown source={ti.desc} />
|
<SvelteMarkdown source={ti.desc} />
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue