javascript - 自动缩放元素以适应视口，当不是 100% 可见时

Question

我的目标是按比例自动缩放元素 - 它在视口中大约 40% 可见（从底部） -transform: scale(scaleFactor)以适应视口，基于当前视口width和height.

我的代码看起来像这样：

<div class="wrapper relative">
   <figure id="scaleContainer">
      <img id="hardware" class="absolute block" src="path/to/image.jpg">
      <img id="screen" class="absolute block" src="path/to/image.jpg">
    </figure>
</div>

那么如何计算scaleFactor和transformOrigin缩放屏幕图像以适应当前视口？

背景：我有一个基于滚动的比例动画，类似于Apple Catalina 网站。动画看起来和我一样。唯一的问题是：如何动态计算scaleFactor和 ，transformOrigin以便我的屏幕图像居中并在开始时覆盖整个屏幕。

我的 gsap.timeline 看起来像这样：

let timeline = gsap.timeline({ paused:true });
timeline.fromTo('#scaleContainer', {scale: scaleFactor}, {scale: 1});

注意：我要计算transformOrigin上的y-axis，因为图形标签不在视口中居中，所以transform-origin: centerortransform-origin: 50% 50%不会起作用。

我怎样才能最好地解决这个问题？感谢您的回答和想法

标签： javascriptmathtransformscalegsap