parallax-layerslisted

# Parallax layers Parallax is the effect most often done wrong, because the cheap version — translate a background image slower than the page — reads as a template setting. The version that works needs *separated* layers, which is why this skill starts after `davinci:generating-assets` has decomposed a still. ## Only two properties may move `transform` and `opacity` are composited on the GPU. Everything else — `top`, `margin`, `background-position`, `width` — forces layout or paint on every frame and will drop frames on a mid-range laptop the moment two layers move at once. ```css .layer { will-change: transform; transform: translate3d(0, var(--shift), 0); } ``` Set `will-change` only on the handful of elements that actually move, and remove it when the section leaves view. Left on permanently it promotes every layer to its own compositor tile and costs memory for nothing. ## Drive it from one measurement per frame Reading `getBoundingClientRect()` per layer per frame is the usual cause of jank: each read after a write forces a synchronous layout. Measure the *section* once, then write to every layer from that one number. ```js const layers = [...section.querySelectorAll('[data-depth]')]; let ticking = false; function frame() { const r = section.getBoundingClientRect(); // one read const p = -r.top / (r.height - innerHeight || 1); // 0 to 1 through the section for (const el of layers) { // writes only el.style.setProp