向下滚动页面时缩放和向下移动图像（离屏）答案

【问题标题】：Scale and move image down (off-screen) on scroll down the page向下滚动页面时缩放和向下移动图像（离屏）
【发布时间】：2021-12-30 20:42:16
【问题描述】：

我在 WordPress 网站中有一张图片，该图片位于（绝对）背景视频上方和文本块下方（也是绝对位置）。当用户向下滚动页面时，我需要将图像缩放到 0 到左下角。同时，我的导航栏中出现了类似的图像，该图像锚定在浏览器窗口的底部并在滚动时出现。该效果目前正常工作。该站点是在 Divi 中完成的，所讨论的图像是一个全角图像模块。我在 Divi 的 Scroll Effects 中尝试的一切都没有产生适当的效果。你可以在这里预览：https://modusai.wpengine.com

【问题讨论】：

您希望我们查看的所有代码都必须以文本形式出现在问题中。
嗨，格雷格。还没有代码可供我添加，因为我在 Divi 中执行此操作。也就是说，对于那些偶然发现这一点的人 - 我能够在全宽图像模块上使用 Divi 的滚动效果来达到预期的效果！下面将分别回答我的问题。

标签： scroll transform scale move

【解决方案1】：

为了在 Divi 中实现所需的效果 - 我从全角标题部分开始。在 Fullwidth Header 模块中，我上传并添加了背景视频。在同一部分（是的，您可以将多个模块添加到全角部分），我添加了一个全角图像和另一个全角标题。这两个模块都设置为绝对位置（分别为左下和中心），z-index 分别为 299 和 499，以实现我需要的分层效果。

然后，在 Fullwidth Image 模块中，我启用了 Vertical Motion、Horizontal Motion 和 Scaling Up and Down 效果。这些设置是：
垂直运动：18% / 48% / 78% 和 0 / 7 / 15
水平运动：18% / 48% / 78% 和 0 / -7 / -15
缩放比例：18% / 48% / 78% 和 100% / 50% / 0%
这三个都将运动效果触发器设置为“元素底部”

样品目前在https://modusai.wpengine.com/ 如有任何问题，请联系我！

【讨论】：