滚动并让内容在动画时保持不变答案

【问题标题】：Scroll and let content stick while animating滚动并让内容在动画时保持不变
【发布时间】：2022-01-21 03:05:52
【问题描述】：

我想知道如何实现以下滚动动画，其中 STRATEGY 和 CREATIVE 副本停靠在顶部，然后在用户滚动时进行动画处理，当动画完成后，页面继续滚动。

请在此处查看页面示例：https://www.mrsandmr.com/

理论上这叫什么。

谢谢

【问题讨论】：

查看 CSS 位置：粘性
我的回答对你有帮助吗？
@AlexGru 这太完美了，非常感谢

标签： javascript css animation

【解决方案1】：

我最近也对此进行了一些研究，主要是受到 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”策略/创意的动画逻辑

我会将其分解为以下动画阶段：

translateX 从外部（相对于滚动位置）直到 2 个元素到达视口中心
现在rotate 再次相对于滚动位置旋转 180°
同样，translate 但不在视口中

【讨论】：