使用窗口滚动转换比例图像

Question

向下滚动页面时，我的不透明度样式被触发，但是我的变换量表不是。关于如何解决这个问题或我所缺少的内容的任何想法？

codepen：https://codepen.io/anon/pen/wyrble

html：

<div class="top"><div class="title">Fade out</div></div>

scss：

.top {
  margin: 0;
  position: relative;
  width: 100%;
  height: 400px;
  opacity: 1;
  text-align: center;
  font-family: 'helvetica';
  font-size: 80px;
  font-weight: 100;
  color: #fff;
  background: url("http://via.placeholder.com/350x150");
  background-position:center;
  background-size: 100%;
  background-repeat: no-repeat;
}
.title {
  position: absolute;
  top: 60%;
  left: 100px;
}

JS：

$(window).scroll(function(){
  $(".top").css({
  'opacity' : 1 - $(window).scrollTop() / 250,
  'transform': 'scale(1.5)' - $(window).scrollTop() / 250
  });
});

Answer 1

您正在尝试将字符串添加到整数中，请尝试以下操作： -

'transform': 'scale(' + (1.5 - $(window).scrollTop() / 250) + ')'