Question

我想使用滚动功能缩放div。

我可以通过修改宽度来使图像变大，但不能改变转换函数内部的比例，这正是我设计所需的。

$(document).ready(function() {
  $(window).scroll(function() {

      var scroll = $(window).scrollTop();
      $('.layer1').css({
          what goes here to modify transform: scale() ?
        }


      })
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="layer1">
  <div class="image1">
    <img src="resources/images/bg/01.jpg" alt="">
  </div>
  <div class="image2">
    <img src="resources/images/bg/02.jpg" alt="">
  </div>
  <div class="image3">
    <img src="resources/images/bg/03.jpg" alt="">
  </div>
</div>

我希望div的“ layer1”能够根据滚动功能进行缩放，但是我不能将其单独与缩放功能绑定。

Answer 1

尝试一下：

let scroll = $(window).scrollTop() / 30 /* Is the ratio */;
button.css("transform", "scale("+ scroll +", "+ scroll +")");

您需要添加一个比例，因为标度2就像是尺寸的两倍，并且滚动位置太大。

如何使用滚动条修改CSS变换比例？

1 个答案: