部分滚动缩放动画

Question

我正在寻找一点方向，我在几个网站上看到了这种效果，并一直在努力弄清楚如何实现这一目标。

我正在尝试做什么的示例

我尝试过使用背景，但它不会那样工作。就像所有元素都是固定的，但保留在视图中，直到缩放和淡出。

我到处搜索，在jQuery或JavaScript中找不到任何东西。我什至不知道它叫什么。

我最大的问题是该部分看起来是固定的，但实际上并非如此？

$(window).scroll(function() {
	var scroll = $(window).scrollTop();
	
	$(".zoom img").css({
		transform: 'translate3d(-50%, -'+(scroll/100)+'%, 0) scale('+(100 + scroll/5)/100+')'
	});
});

body{
   margin: 0;
}
	
.section{
	padding: 0;
	width: 100%;
	height: 100vh;
	position: relative;
	background: #f5f5f5;
	box-shadow: 0px -10px 60px rgba(0,0,0,0.25);
}
.zoom{
	overflow: hidden;
	padding-bottom: 55%;
}
.zoom img{
	position: fixed;
	top: 0%;
	left: 50%;
	transform: translateX(-50%);	
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="zoom">
	<img src="https://newevolutiondesigns.com/images/freebies/dog-wallpaper-12.jpg">
</section>
<section class="section">
	<h1>Section Two</h1>
</section>
	
<section class="section">
	<h1>Section Three</h1>
</section>	

Answer 1

所以第一部分（带有图像）应该是 100% 视口高度，对吧？所以我也section类添加到zoom部分。

然后在脚本中，您需要在scrollTop小于窗口高度100%时进行该translate3d。因为当scroll>$(window).height()时，这意味着你已经到达了第二部分。（因为缩放部分高度=窗口高度）

请参阅下面的代码片段。从这里可以轻松设置您需要的任何其他样式

$(window).scroll(function() {
  var scroll = $(window).scrollTop()
  if (scroll < $(window).height()) {
    $(".zoom img").css({
      transform: 'translate3d(-50%, -' + (scroll / 100) + '%, 0) scale(' + (100 + scroll / 5) / 100 + ')'
    });
  }
});

body {
  margin: 0;
}
.section {
  padding: 0;
  width: 100%;
  height: 100vh;
  position: relative;
  background: #f5f5f5;
  box-shadow: 0px -10px 60px rgba(0, 0, 0, 0.25);
}
.zoom {
  overflow: hidden;
  padding-bottom: 55%;
}
.zoom img {
  position: fixed;
  top: 0%;
  left: 50%;
  transform: translateX(-50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="zoom section">
  <img src="https://newevolutiondesigns.com/images/freebies/dog-wallpaper-12.jpg">
</section>
<section class="section">
  <h1>Section Two</h1>
</section>
<section class="section">
  <h1>Section Three</h1>
</section>