jQuery淡入/淡出动画

Question

嗯，我有一个问题，我真的不知道如何解决。我是 jQuery 和 JavaScript 的新手。我使用 jQuery 为文本设置动画。

我的问题是我想让一个对象在滚动出视图时淡出/淡入。 元素的不透明度发生了变化，但我不确定如何同时“放大”它...

我希望以允许我使用标准 css 转换的方式执行此操作。

$(window).scroll(function() {
  $(".top").css("opacity", 1 - $(window).scrollTop() / 150);
});

* {
  padding: 0;
  margin: 0;
}

.header1 {
  width: 100%;
  background-image: url(https://simply-design.ml/img/start1.jpg);
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 60px;
}

.header-sec {
  width: 75%;
  margin: 25px 0px;
  padding: 30px 0px;
}

.header-sec h1 {
  font-size: 75px;
  font-family: arial;
}

.header-sec .p1 {
  font-size: 27px;
  font-family: arial;
}

.space {
  background-color: #fff;
  height: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<header class="header1">
  <section class="header-sec">
    <center class="top">
      <h1>TITLE</h1>
      <div style="height: 3px; width: 100px; background-color: #000; margin: 30px;"></div>
      <p class="p1">subtitle here</p>
    </center>
  </section>
</header>

<section class="space"></section>

Answer 1

像这样使用变换的比例属性

    var abc = 1 - $(window).scrollTop() / 150;
    $(".top").css("opacity", abc);
    $(".top").css("transform", "scale(" + abc + ")");

* {
  padding: 0;
  margin: 0;
}

.header1 {
  width: 100%;
  background-image: url(https://simply-design.ml/img/start1.jpg);
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 60px;
}

.header-sec {
  width: 75%;
  margin: 25px 0px;
  padding: 30px 0px;
}

.header-sec h1 {
  font-size: 75px;
  font-family: arial;
}

.header-sec .p1 {
  font-size: 27px;
  font-family: arial;
}

.space {
  background-color: #fff;
  height: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<header class="header1">
  <section class="header-sec">
    <center class="top">
      <h1>TITLE</h1>
      <div style="height: 3px; width: 100px; background-color: #000; margin: 30px;"></div>
      <p class="p1">subtitle here</p>
    </center>
  </section>
</header>

<section class="space"></section>
<script>
  $(window).scroll(function() {

    var abc = 1 - $(window).scrollTop() / 150;
    $(".top").css("opacity", abc);
    $(".top").css("transform", "scale(" + abc + ")");
  });
</script>