2b:null 2c:["$","title",null,{"children":"Text Effect | lyuehh | Observable"}] 31:T5b6,html`

Style

`32:Ta62,{ const prefix = 'I work with ' const skills = [ 'TypeScript', 'React', 'JavaScript', 'HTML & CSS', 'jQuery', 'Node.js', 'MongoDB', 'PHP & MySQL', 'passion & love' ].map(s => `${s}.`) const delay = 2 const step = 1 const tail = 5 const timeout = 75 // const p = document.createElement('p') // document.body.appendChild(p) const p = html`

` yield p; const colors = [ "rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)", ] function getRandomColor() { return colors[Math.floor(Math.random() * colors.length)] } function getRandomChar() { return String.fromCharCode(Math.random() * (127 - 33) + 33) } function getRandomColoredString(n) { const fragment = document.createDocumentFragment() for (let i = 0; i < n; i++) { const char = document.createElement('span') char.textContent = getRandomChar() char.style.color = getRandomColor() fragment.appendChild(char) } return fragment } const $ = { text: '', prefixP: -tail, skillI: 0, skillP: 0, direction: 'forward', delay, step, } function render() { const skill = skills[$.skillI] if ($.step) { $.step-- } else { $.step = step if ($.prefixP < prefix.length) { if ($.prefixP >= 0) { $.text += prefix[$.prefixP] } $.prefixP++ } else { if ($.direction === 'forward') { if ($.skillP < skill.length) { $.text += skill[$.skillP] $.skillP++ } else { if ($.delay) { $.delay-- } else { $.direction = 'backward' $.delay = delay } } } else { if ($.skillP > 0) { $.text = $.text.slice(0, -1) $.skillP-- } else { $.skillI = ($.skillI + 1) % skills.length $.direction = 'forward' } } } } p.textContent = $.text p.appendChild(getRandomColoredString( $.prefixP < prefix.length ? Math.min(tail, tail + $.prefixP): Math.min(tail, skill.length - $.skillP))) setTimeout(render, timeout) } setTimeout(render, 500) }33:[] 2f:{"id":"39d94ce2617d2a5c","slug":"text-effect","title":"Text Effect","thumbnail":"4d33e96f6e7581ab62da9fa5f5072954b5fa82b49928db53c2b16d5379eee9b4","access_level":"public","create_time":"$D2018-02-25T08:13:21.455Z","update_time":"$D2018-02-25T08:18:31.550Z","view_time":null,"first_public_time":"$D2018-02-25T08:18:51.274Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"e642b834fe340895","login":"lyuehh","name":"","avatar_url":"https://avatars-next.observableusercontent.com/879e9f8b769513c33c39ba28e083b6aea1a7cdf5757bb6f2e5798f307f375003","tier":"starter_2024"},"version":17,"publish_version":17,"role":null,"authored":false,"authors":[{"type":"individual","id":"364dfb7960e64aa4","login":"lyuehh","name":"","avatar_url":"https://avatars-next.observableusercontent.com/879e9f8b769513c33c39ba28e083b6aea1a7cdf5757bb6f2e5798f307f375003","tier":null}],"members":[{"type":"individual","id":"364dfb7960e64aa4","login":"lyuehh","name":"","avatar_url":"https://avatars-next.observableusercontent.com/879e9f8b769513c33c39ba28e083b6aea1a7cdf5757bb6f2e5798f307f375003","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Text Effect","cells":[{"id":0,"value":"md`\n# Text Effect\nfrom \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"