${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:{"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"},{"id":5,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"randomImg = Array(randomText.length)\n .fill()\n .map(\n (_, i) =>\n html`

`\n )","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":49,"value":"scaleFactor = randomText.length","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"scaleX = d3\n .scaleLinear()\n .domain([0, height * scaleFactor])\n .range([0, width * randomText.length])","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"alphabet = \"abcdefghijklmnopqrstuvwxyz\".split('')","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}