滚动并让内容在动画时保持不变
Scroll and let content stick while animating
我想知道如何实现下面的滚动动画，其中STRATEGY和CREATIVE复制停靠到顶部，然后在用户滚动时动画，当动画完成后，页面继续滚动。
请在此处查看页面示例：https://www.mrsandmr.com/
理论上这个叫什么
谢谢
我最近也对此进行了一些研究，主要是受到 Apple 产品页面上令人印象深刻的网页设计的启发，例如 this one。
这是我在 Medium 上找到的一篇不错的文章，它解释了如何实现这种滚动动画：How to jazz up your website like Apple with JavaScript
演示页面上提供了结果 here。
如 TL;DR 部分所总结：
To sum it all up, the mechanism of how it works is really just:
1. A scrolling container
2. position: sticky;elements
3. JavaScript that converts scroll position of the scrolling container to styles for sticky elements
4. (Sometimes) CSS transition property
“Mrs&Mr”strategy/creative 的动画逻辑
我会将其分解为以下动画阶段：
translateX 从外部（相对于滚动位置）直到 2 个元素到达视口的中心- 现在
rotate 直到再次相对于滚动位置 180°
- 同样，
translate但在视口之外
我想知道如何实现下面的滚动动画，其中STRATEGY和CREATIVE复制停靠到顶部，然后在用户滚动时动画，当动画完成后，页面继续滚动。
请在此处查看页面示例：https://www.mrsandmr.com/
理论上这个叫什么
谢谢
我最近也对此进行了一些研究，主要是受到 Apple 产品页面上令人印象深刻的网页设计的启发，例如 this one。
这是我在 Medium 上找到的一篇不错的文章，它解释了如何实现这种滚动动画：How to jazz up your website like Apple with JavaScript
演示页面上提供了结果 here。
如 TL;DR 部分所总结：
To sum it all up, the mechanism of how it works is really just:
1. A scrolling container
2. position: sticky;elements
3. JavaScript that converts scroll position of the scrolling container to styles for sticky elements
4. (Sometimes) CSS transition property
“Mrs&Mr”strategy/creative 的动画逻辑
我会将其分解为以下动画阶段：
translateX从外部（相对于滚动位置）直到 2 个元素到达视口的中心- 现在
rotate直到再次相对于滚动位置 180° - 同样，
translate但在视口之外