2b:null 2c:["$","title",null,{"children":"Scroll Text/Image Matching | Lukas Hermann | Observable"}] 31:T4f2,viewof currentScroll = { const container = html`

`; const textContent = html`

${randomText.map( (t, i) => html`

${t}

` )}

`; const content = html`

${textContent}

${randomImg}

`; container.append(content); container.addEventListener('scroll', function(e) { textContent.style.transform = `translate(-${scaleX( e.target.scrollTop )}px, 0px)`; }); return container; }32:[] 2f:{"id":"09abf903dc6748bb","slug":"scroll-text-image-matching","title":"Scroll Text/Image Matching","thumbnail":"a442cfb347d575d7fd4c8745c8bc9ab5a26b352b2ce999c4dcdcd23ff722866c","access_level":"public","create_time":"$D2021-01-12T03:26:12.165Z","update_time":"$D2021-01-12T07:08:29.182Z","view_time":null,"first_public_time":"$D2021-01-12T05:01:28.699Z","fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"5dac1bae5c944e85","login":"lsh","name":"Lukas Hermann","avatar_url":"https://avatars-next.observableusercontent.com/31a58bc27625283f0b6e03f087974541e2dd1f30f853a47e1881337de707df79","tier":"starter_2024"},"version":415,"publish_version":415,"role":null,"authored":false,"authors":[{"type":"individual","id":"a099be553e5b21a7","login":"lsh","name":"Lukas Hermann","avatar_url":"https://avatars-next.observableusercontent.com/31a58bc27625283f0b6e03f087974541e2dd1f30f853a47e1881337de707df79","tier":null}],"members":[{"type":"individual","id":"a099be553e5b21a7","login":"lsh","name":"Lukas Hermann","avatar_url":"https://avatars-next.observableusercontent.com/31a58bc27625283f0b6e03f087974541e2dd1f30f853a47e1881337de707df79","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Scroll Text/Image Matching","cells":[{"id":0,"value":"md`# Scroll Text/Image Matching\nI saw [this tweet](https://twitter.com/greglalle/status/1345079590725820416) by Grégory Lallé and thought I'd try to create a similar effect on Observable.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"randomImg = Array(randomText.length)\n .fill()\n .map(\n (_, i) =>\n html`

`\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"randomText = Array.from({ length: 10 }, (_, i) =>\n Array.from(\n { length: d3.randomInt(4, 7)() },\n (_, j) => alphabet[d3.randomInt(0, 26)()]\n ).join('')\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"scaleFactor = randomText.length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"scaleX = d3\n .scaleLinear()\n .domain([0, height * scaleFactor])\n .range([0, width * randomText.length])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"alphabet = \"abcdefghijklmnopqrstuvwxyz\".split('')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"