滚动 - 内容拉伸动画

Question

我想像这里一样为内容块（滚动时）设置动画：

example 1
example 2

具有这种“拉伸”效果。

我该如何实现？

Answer 1

您可以考虑在图像上执行transform: scaleY(2) 以获得拉伸效果，尽管您必须尝试获得您想要的确切外观，这可能取决于您想要使用的任何图像的纵横比。

要将图像及其相关文本向上移动到视口中，您最好将所有内容（img 拉伸和移动）组合到 CSS 动画中，因为这些动画可以让您控制准确的时间。

从示例中看起来，您似乎需要一组关键帧来定义此运动和进入的动画，而另一组则用于定义向上移动的动画。

您将需要使用 CSS animation-fill-mode: forwards 来确保在动画设置后元素保持在原位。

如果您可以包含一些带有图像和文本的最小布局示例，这将有助于创建一个 sn-p 来显示这些转换的实际效果。