我正在尝试弄清楚Invision's blog 动画的工作原理。特别是滚动时下图中标题图像的缩放和阴影。
我原以为这是一个 CSS 动画，但它没有出现在 Chrome DevTools 的“动画”选项卡中。
这个动画是如何工作的，为什么它没有出现在“动画”标签中？
【问题讨论】：
标签： css animation google-chrome-devtools
我快速浏览了一下，这是我想出的：
让我们从元素 .post-hero 开始：它充当包装器，并具有 position: fixed 以使图像在我们滚动时或多或少地保持在原位。
在其中有 .hero-bg 元素，其中包含背景图像本身。请注意，该元素具有将其background 设置为none 的内联样式，但它具有指向背景图像本身的data-bg 属性。我的猜测是在页面加载时，一些 JavaScript 用于获取此属性并添加实际图像。
实际图像设置为<img> 元素，位于.hero-bg 内部的.backstretch 元素内。现在，.backstretch 元素是动画本身发生的地方：当我们滚动时，这个元素的不透明度会发生变化（以改变着色量），并且元素的 3D 平移和缩放也会发生变化。我猜这是使用 JavaScript 和页面上的滚动事件侦听器完成的。
在.hero-bg之后，有.hero-overlay，其背景色为#252b33，不透明度为0.35，为图像提供阴影效果，同时实际图像的不透明度随着页面滚动而变化.
编辑：如果你右击.backstretch元素并选择“属性修改中断”，然后滚动，你会发现元素的属性在一个名为CSSPlugin.min.js的文件中被修改。谷歌搜索这似乎表明 CSSPlugin 是 GSAP 动画库的插件......我自己没有经验，但我知道它很受欢迎，其他人可能可以确认这是否是用来做动画的.我的猜测是动画是使用GSAP CSSPlugin 完成的。
【讨论】：