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。

然后在脚本中，当translate3d小于scrollTop窗口高度时，您需要设置100%。因为当scroll>$(window).height()表示您已达到第二部分时。（因为缩放部分高度=窗口高度）

请参阅下面的代码段。从这里开始，您可以随心所欲地设计其他任何风格

＆＃13;

$(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 + ')'
    });
  }
});

＆＃13;

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%);
}

＆＃13;

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

＆＃13;

部分滚动缩放动画

1 个答案: