mirror of
https://github.com/web3privacy/w3ps1.git
synced 2024-10-15 16:26:26 +02:00
Speaker anim
This commit is contained in:
parent
8e56655fca
commit
21e28a720c
4 changed files with 23 additions and 6 deletions
7
package-lock.json
generated
7
package-lock.json
generated
|
@ -21,6 +21,7 @@
|
||||||
"postcss": "^8.4.21",
|
"postcss": "^8.4.21",
|
||||||
"prettier": "^2.8.0",
|
"prettier": "^2.8.0",
|
||||||
"prettier-plugin-svelte": "^2.8.1",
|
"prettier-plugin-svelte": "^2.8.1",
|
||||||
|
"remove-markdown": "^0.5.0",
|
||||||
"svelte": "^3.54.0",
|
"svelte": "^3.54.0",
|
||||||
"svelte-markdown": "^0.2.3",
|
"svelte-markdown": "^0.2.3",
|
||||||
"tailwindcss": "^3.2.6",
|
"tailwindcss": "^3.2.6",
|
||||||
|
@ -2307,6 +2308,12 @@
|
||||||
"url": "https://github.com/sponsors/mysticatea"
|
"url": "https://github.com/sponsors/mysticatea"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/remove-markdown": {
|
||||||
|
"version": "0.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/remove-markdown/-/remove-markdown-0.5.0.tgz",
|
||||||
|
"integrity": "sha512-x917M80K97K5IN1L8lUvFehsfhR8cYjGQ/yAMRI9E7JIKivtl5Emo5iD13DhMr+VojzMCiYk8V2byNPwT/oapg==",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
"node_modules/resolve": {
|
"node_modules/resolve": {
|
||||||
"version": "1.22.1",
|
"version": "1.22.1",
|
||||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
|
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
|
||||||
|
|
|
@ -24,6 +24,7 @@
|
||||||
"postcss": "^8.4.21",
|
"postcss": "^8.4.21",
|
||||||
"prettier": "^2.8.0",
|
"prettier": "^2.8.0",
|
||||||
"prettier-plugin-svelte": "^2.8.1",
|
"prettier-plugin-svelte": "^2.8.1",
|
||||||
|
"remove-markdown": "^0.5.0",
|
||||||
"svelte": "^3.54.0",
|
"svelte": "^3.54.0",
|
||||||
"svelte-markdown": "^0.2.3",
|
"svelte-markdown": "^0.2.3",
|
||||||
"tailwindcss": "^3.2.6",
|
"tailwindcss": "^3.2.6",
|
||||||
|
|
|
@ -12,18 +12,24 @@
|
||||||
function twitterLink(handle) {
|
function twitterLink(handle) {
|
||||||
return `https://twitter.com/${handle}`;
|
return `https://twitter.com/${handle}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function animateSpeaker (el) {
|
||||||
|
for(const e of el.target.getElementsByClassName('animate-speaker')) {
|
||||||
|
animateText({ target: e })
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#each items.map(getPerson) as item}
|
{#each items.map(getPerson) as item}
|
||||||
<div class="hover:bg-white hover:text-black p-2 {size === 'small' ? 'w-2/3 sm:w-48' : 'w-2/3 sm:w-64'} person-item">
|
<div class="hover:bg-white hover:text-black p-2 {size === 'small' ? 'w-2/3 sm:w-48' : 'w-2/3 sm:w-64'} person-item" on:mouseenter={animateSpeaker}>
|
||||||
<div>
|
<div>
|
||||||
<a href={twitterLink(item.twitter)} target="_blank"
|
<a href={twitterLink(item.twitter)} target="_blank"
|
||||||
><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">{item.name}</div>
|
<div class="mt-4 speaker-name animate-speaker">{item.name}</div>
|
||||||
<div class="text-base text-mild">
|
<div class="text-base text-mild">
|
||||||
<a href={twitterLink(item.twitter)} class="hover:underline">@{item.twitter}</a>
|
<a href={twitterLink(item.twitter)} class="hover:underline animate-speaker">@{item.twitter}</a>
|
||||||
</div>
|
</div>
|
||||||
{#if item.caption}
|
{#if item.caption}
|
||||||
<div class="mt-2 text-base text-supermild"><SvelteMarkdown source={item.caption} /></div>
|
<div class="mt-2 text-base text-supermild"><SvelteMarkdown source={item.caption} /></div>
|
||||||
|
|
|
@ -1,11 +1,14 @@
|
||||||
|
|
||||||
|
import removeMd from 'remove-markdown'
|
||||||
|
|
||||||
export function rand(length) {
|
export function rand(length) {
|
||||||
let result = '';
|
let result = '';
|
||||||
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
||||||
const charactersLength = characters.length;
|
const charactersLength = characters.length;
|
||||||
let counter = 0;
|
let counter = 0;
|
||||||
while (counter < length) {
|
while (counter < length) {
|
||||||
result += characters.charAt(Math.floor(Math.random() * charactersLength));
|
result += characters.charAt(Math.floor(Math.random() * charactersLength));
|
||||||
counter += 1;
|
counter += 1;
|
||||||
}
|
}
|
||||||
return result;
|
return result;
|
||||||
}
|
}
|
||||||
|
@ -18,7 +21,7 @@ export function animateText (ev) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
ev.target.setAttribute('data-animate', "1")
|
ev.target.setAttribute('data-animate', "1")
|
||||||
const orig = ev.target.getAttribute('data-text')
|
const orig = removeMd(ev.target.getAttribute('data-text'))
|
||||||
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(' ')
|
||||||
|
|
Loading…
Reference in a new issue