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) + ')'

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

1 个答案: