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

像这样使用变换的scale属性

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

＆＃13;

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;