滚动上的jQuery降低div的比例

Question

我正在尝试制作类似于Apple Watch的动画。 https://www.apple.com/apple-watch-series-4/滚动全屏视频部分。

它们会将比例值从1减小到0。即比例（1,1）

我写了下面的代码。但是scale从0变为1。

var docHeight = document.documentElement.offsetHeight;
    jQuery(window).scroll(function (event) {
        var scroll = jQuery(window).scrollTop() + 62;
        if(scroll >= jQuery('.image-text-effect').offset().top){

            console.log('docHeight'+docHeight);
            console.log('innerHeight'+window.innerHeight);
            console.log('scroll'+scroll);

            var scrolled = scroll / ( docHeight - window.innerHeight );

            transformValue = 'scale('+scrolled+', 1)';
            transformValue1 = 'scale(1, '+scrolled+')';

            document.getElementById('section-border-right').style.transform = transformValue;
            document.getElementById('section-border-left').style.transform = transformValue;
            document.getElementById('section-border-top').style.transform = transformValue1;
            document.getElementById('section-border-bottom').style.transform = transformValue1;
        }
    });

有人可以帮我解决这个问题吗？

这是我要更改比例的HTML代码

<div class="section-borders-inside">
 <div class="section-border section-border-right" data-scale="x" id="section-border-right" style="transform: scale(0, 1);"></div>
 <div class="section-border section-border-left" data-scale="x" id="section-border-left" style="transform: scale(0, 1);"></div>
 <div class="section-border section-border-top" data-scale="top" id="section-border-top" style="transform: scale(1, 0);"></div>
 <div class="section-border section-border-bottom" data-scale="bottom" id="section-border-bottom" style="transform: scale(1, 0);"></div>
</div>