javascript - 如何在使用 Javascript 滚动页面时使用 scale3d 逐渐增加比例？

Question

我想在滚动页面时在 css 上使用 scale3d 逐渐增加比例。喜欢从

scale3d(1, 1, 1) to scale3d(2, 2, 2) 

const container       = document.querySelector('.container-testi');
const containerHeight = container.scrollHeight;
const iWillExpand     = document.querySelector('.iWillExpand');
   
container.onscroll = function(e) {
   iWillExpand.style.transform = `scale3d(${0.8 + 0.2 * container.scrollTop / (containerHeight - 
   300)})`;
    };

.iWillExpand{
      transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) 
      rotateX( 0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); 
      transform-style: preserve-3d; 
      }

我的代码没有按照我想要的方式工作，有什么办法可以做到吗？谢谢你

Answer 1

您可以使用该属性并使用 javascriptwindow.scrollY将其与该属性相加。transform: scale3d()下面是如何完成它的基本示例。

const display = document.querySelector('.display')
display.style.position = 'fixed';

window.addEventListener('scroll', function() {
  let value = window.scrollY
  let box = document.querySelector('.box')
  let num1 = (1 + value * .002).toFixed(2)
  let num2 = (1 + value * .001).toFixed(2)
  let num3 = (1 + value * .005).toFixed(2)
  box.style.transform = `scale3d(${num1}, ${num2}, ${num3})`
  
  display.textContent = `First scale value: ${num1}, Second scale value: ${num2}, Third scale value: ${num3}`
})

#main {
  height: 1000px;
  position: relative;
}

.flex {
  display: flex;
  justify-content: center;
}

.box {
  width: 100px;
  height: 100px;
  background: red;
  position: fixed;
  top: 30%;
  left: calc(50% - 50px);
}

<div id="main">
  <div class="display"></div>
  <div class="flex">
    <div class="box"></div>
  </div>
</div>

Answer 2

应该这样做......
使用css变量更容易

:root {
  --sXYZ  : 1;
  }
.iWillExpand {
  transform : translate3d(0px, 0px, 0px) 
              scale3d( var(--sXYZ), var(--sXYZ), var(--sXYZ) ) 
              rotateX( 0deg) 
              rotateY(0deg) 
              rotateZ(0deg) 
              skew(0deg, 0deg)
              ; 
  transform-style : preserve-3d; 
  }

const 
  Root            = document.documentElement
, container       = document.querySelector('.container-testi') 
, containerHeight = container.scrollHeight
  ;
container.onscroll = () =>
  {
  let calc = 0.8  + 0.2 * container.scrollTop / (containerHeight - 300)
  Root.style.setProperty('--sXYZ', calc)
  }