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",
|
||||
"prettier": "^2.8.0",
|
||||
"prettier-plugin-svelte": "^2.8.1",
|
||||
"remove-markdown": "^0.5.0",
|
||||
"svelte": "^3.54.0",
|
||||
"svelte-markdown": "^0.2.3",
|
||||
"tailwindcss": "^3.2.6",
|
||||
|
@ -2307,6 +2308,12 @@
|
|||
"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": {
|
||||
"version": "1.22.1",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
|
||||
|
|
|
@ -24,6 +24,7 @@
|
|||
"postcss": "^8.4.21",
|
||||
"prettier": "^2.8.0",
|
||||
"prettier-plugin-svelte": "^2.8.1",
|
||||
"remove-markdown": "^0.5.0",
|
||||
"svelte": "^3.54.0",
|
||||
"svelte-markdown": "^0.2.3",
|
||||
"tailwindcss": "^3.2.6",
|
||||
|
|
|
@ -12,18 +12,24 @@
|
|||
function twitterLink(handle) {
|
||||
return `https://twitter.com/${handle}`;
|
||||
}
|
||||
|
||||
function animateSpeaker (el) {
|
||||
for(const e of el.target.getElementsByClassName('animate-speaker')) {
|
||||
animateText({ target: e })
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#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>
|
||||
<a href={twitterLink(item.twitter)} target="_blank"
|
||||
><img src="/people/{item.img}" class="grayscale invert aspect-square object-cover w-full" /></a
|
||||
>
|
||||
</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">
|
||||
<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>
|
||||
{#if item.caption}
|
||||
<div class="mt-2 text-base text-supermild"><SvelteMarkdown source={item.caption} /></div>
|
||||
|
|
|
@ -1,3 +1,6 @@
|
|||
|
||||
import removeMd from 'remove-markdown'
|
||||
|
||||
export function rand(length) {
|
||||
let result = '';
|
||||
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
||||
|
@ -18,7 +21,7 @@ export function animateText (ev) {
|
|||
return;
|
||||
}
|
||||
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 genRand = (pos = 0, len = null) => orig.substring(pos, len).split(' ').map(x => rand(x.length)).join(' ')
|
||||
|
|
Loading…
Reference in a new issue