CSS 中的 Spiral Scrollytelling，使用 sibling-index()

Confession time: I’ve read about the performance benefits of [scroll-timeline()](https://css-tricks.com/slide-through-unlimited-dimensions-with-css-scroll-timelines/), but when I see an impressive JavaScript scrollytelling site like this one, it makes me question if the performance of old-school, main-thread scrollytelling is all that bad. The other shoe drops when the creators of that site admit they “ran into real limits,” and “mobile technically works, but it loses parallax and chops compositions,” to the extent that they “chose to gate phones to protect the first impression.” Put another way: they couldn’t get it working on mobile, and it sounds like JavaScript performance may have been one of the culprits.

坦白时间：我读过性能优势，关于[scroll-timeline()](https://css-tricks.com/slide-through-unlimited-dimensions-with-css-scroll-timelines/)，但是当我看到像这样的令人印象深刻的 JavaScript scrollytelling 站点时，它让我质疑老派主线程 scrollytelling 的性能是否真的那么差。另一只鞋掉下来了，当该站点的创建者承认他们「遇到了真正的限制」，并且「移动端技术上能工作，但失去了视差并砍掉了合成」，以至于他们「选择屏蔽手机以保护第一印象。」换句话说：他们无法让它在移动端工作，听起来 JavaScript 性能可能是罪魁祸首之一。

The creator of another of my favorite scrolling experiments — which also uses JavaScript and also works best on desktop — called out that his text vortex section “would look better if it were applied for each character rather than each word, but that’s incredibly difficult to pull off using this same technique without incurring an astronomical performance impact.”

我最喜欢的另一个滚动实验的创建者——它也使用 JavaScript，并且在桌面端效果最佳——指出他的文本漩涡部分「如果应用于每个字符而不是每个单词会更好看，但使用相同技术实现这一点极其困难，而不会造成天文数字般的性能影响。」

Challenge accepted.

挑战接受。

He may have inadvertently created a realistic benchmark test for smoothly animating hundreds of divs based on scrolling.

他可能无意中创建了一个基于滚动的平滑动画数百个 div 的真实基准测试。

That’s our cue to see if we can make a lookalike effect using modern CSS features to smoothly spiral every character in a string of text as the user scrolls down. To give the original text vortex some CSS sibling rivalry, let’s give the new sibling-index() function a whirl, although it is still waiting on Firefox support at the ti...