3e:null 3f:["$","title",null,{"children":"Scroll Text/Image Matching | torin | Observable"}] 45: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; }46:[] 43:{"id":"4cb498b52bc5c7f9","slug":null,"title":"Scroll Text/Image Matching","thumbnail":"b4440a5cdc0a4e9eacb80ca70f39fdc780f88c26593652ac9123191f1b6b3665","access_level":"public","create_time":"$D2024-01-23T02:09:18.823Z","update_time":"$D2024-01-23T02:09:18.823Z","view_time":null,"first_public_time":"$D2024-01-23T02:09:18.823Z","has_unpublished_edits":null,"fork":{"id":"09abf903dc6748bb","slug":"scroll-text-image-matching","title":"Scroll Text/Image Matching","owner":{"id":"5dac1bae5c944e85","login":"lsh","name":"Lukas Hermann"}},"stars":0,"starred":false,"owner":{"type":"team","id":"c7d6d8d81cdb4c12","login":"itr0n","name":"torin","avatar_url":"https://avatars-next.observableusercontent.com/865b481a1b341a6597782c01eabc67f1202505cc21467606ea9b0d4f5655316a","tier":"starter_2024","bio":"spatial & data vis hungry","following":false},"version":415,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c71ed11413e90530","login":"itr0n","name":"torin","avatar_url":"https://avatars-next.observableusercontent.com/865b481a1b341a6597782c01eabc67f1202505cc21467606ea9b0d4f5655316a","tier":null,"bio":"spatial & data vis hungry","following":false}],"members":[{"type":"individual","id":"c71ed11413e90530","login":"itr0n","name":"torin","avatar_url":"https://avatars-next.observableusercontent.com/865b481a1b341a6597782c01eabc67f1202505cc21467606ea9b0d4f5655316a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"scaleFactor = randomText.length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"alphabet = \"abcdefghijklmnopqrstuvwxyz\".split('')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 44:"$43:body"