如何在粘性容器内创建类似苹果的滚动效果？

Question

我想创建类似苹果的滚动效果，例如：apple-iphone-xs-practice

当我在顶部共享网站上的粘滞容器内滚动时，iPhone图像将根据滚动进度进行转换。

如何在html和vanilla js中创建它？ 我还是一个初学者。我将非常感谢您为我提供的所有帮助。

我考虑过类似...

<div class="sticky-container">
  <img id="image" src="/image.jpg">
</div>

var image = document.getElementById('image');

document.addEventListener('scroll', function() {
    if (window.scrollY >= 1.247) {
       //Function to scale down the image based on scroll
    }
})