mirror of
https://github.com/web3privacy/w3ps1.git
synced 2024-10-15 16:26:26 +02:00
Test animation
This commit is contained in:
parent
fcfca20d8c
commit
d8a3cd1063
4 changed files with 49 additions and 4 deletions
|
@ -4,6 +4,7 @@
|
||||||
export let size = 'normal';
|
export let size = 'normal';
|
||||||
|
|
||||||
import SvelteMarkdown from 'svelte-markdown';
|
import SvelteMarkdown from 'svelte-markdown';
|
||||||
|
import { animateText } from '$lib/helpers';
|
||||||
|
|
||||||
function getPerson(id) {
|
function getPerson(id) {
|
||||||
return people.find((p) => p.id === id);
|
return people.find((p) => p.id === id);
|
||||||
|
|
36
src/lib/helpers.js
Normal file
36
src/lib/helpers.js
Normal file
|
@ -0,0 +1,36 @@
|
||||||
|
export function rand(length) {
|
||||||
|
let result = '';
|
||||||
|
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
||||||
|
const charactersLength = characters.length;
|
||||||
|
let counter = 0;
|
||||||
|
while (counter < length) {
|
||||||
|
result += characters.charAt(Math.floor(Math.random() * charactersLength));
|
||||||
|
counter += 1;
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function animateText (ev) {
|
||||||
|
if (!ev.target.getAttribute('data-text')) {
|
||||||
|
ev.target.setAttribute('data-text', ev.target.innerHTML)
|
||||||
|
}
|
||||||
|
if (ev.target.getAttribute('data-animate') === "1") {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
ev.target.setAttribute('data-animate', "1")
|
||||||
|
const orig = ev.target.getAttribute('data-text')
|
||||||
|
const steps = orig.length
|
||||||
|
|
||||||
|
const random = rand(orig.length)
|
||||||
|
ev.target.innerHTML = random
|
||||||
|
|
||||||
|
for (let i = 0; i <= steps; i++) {
|
||||||
|
setTimeout(() => {
|
||||||
|
ev.target.innerHTML = orig.substring(0, i) + rand(orig.length - i)
|
||||||
|
|
||||||
|
if (i === steps) {
|
||||||
|
ev.target.setAttribute('data-animate', "0")
|
||||||
|
}
|
||||||
|
}, 50*i)
|
||||||
|
}
|
||||||
|
}
|
|
@ -3,6 +3,8 @@
|
||||||
export let data;
|
export let data;
|
||||||
|
|
||||||
import SvelteMarkdown from 'svelte-markdown';
|
import SvelteMarkdown from 'svelte-markdown';
|
||||||
|
import { animateText } from '$lib/helpers';
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
|
||||||
let navbar = false;
|
let navbar = false;
|
||||||
|
|
||||||
|
@ -13,6 +15,11 @@
|
||||||
{ title: 'Sponsors', url: '#sponsors' },
|
{ title: 'Sponsors', url: '#sponsors' },
|
||||||
{ title: 'Ticket', url: '#ticket', class: 'button' }
|
{ title: 'Ticket', url: '#ticket', class: 'button' }
|
||||||
];
|
];
|
||||||
|
|
||||||
|
onMount(async () => {
|
||||||
|
setTimeout(() => animateText({ target: document.getElementById('master-title') }), 0)
|
||||||
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="relative w-full min-h-screen text-white">
|
<div class="relative w-full min-h-screen text-white">
|
||||||
|
@ -25,10 +32,10 @@
|
||||||
</div>
|
</div>
|
||||||
<!--h1 class="text-2xl uppercase">{data.config.title}</h1-->
|
<!--h1 class="text-2xl uppercase">{data.config.title}</h1-->
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center gap-6 uppercase 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 as mi}
|
||||||
<div class="hidden md:block"><a class={mi.class ? mi.class : 'hover:underline'} href={mi.url}>{mi.title}</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>
|
||||||
</div>
|
</div>
|
||||||
|
@ -47,8 +54,8 @@
|
||||||
<div class="w-full h-screen">
|
<div class="w-full h-screen">
|
||||||
<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 uppercase mb-4 md:mb-8">
|
<div id="master-title" class="text-5xl md:text-8xl font-bold mb-4 md:mb-8">
|
||||||
{data.config.shortname}
|
{data.config.shortname.toUpperCase()}
|
||||||
</div>
|
</div>
|
||||||
<div class="text-3xl md:text-5xl md:mb-4 uppercase">{data.config.date} @ <a href={data.config.venueMapUrl} target="_blank" class="underline hover:no-underline">{data.config.venue}</a></div>
|
<div class="text-3xl md:text-5xl md:mb-4 uppercase">{data.config.date} @ <a href={data.config.venueMapUrl} target="_blank" class="underline hover:no-underline">{data.config.venue}</a></div>
|
||||||
<div class="mt-8 text-lg text-mild mx-4">
|
<div class="mt-8 text-lg text-mild mx-4">
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
<script>
|
<script>
|
||||||
import SvelteMarkdown from 'svelte-markdown';
|
import SvelteMarkdown from 'svelte-markdown';
|
||||||
import PeopleList from '$lib/components/PeopleList.svelte';
|
import PeopleList from '$lib/components/PeopleList.svelte';
|
||||||
|
import { animateText } from '$lib/helpers';
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in a new issue