想用 css 或 jquery 对图像进行滚动效果答案

【问题标题】：Want to make Scrolling Effect on image with css or jquery想用 css 或 jquery 对图像进行滚动效果
【发布时间】：2020-08-29 11:06:36
【问题描述】：

我的要求是在加载时显示一些英雄图像，然后当我滚动完整图像时应该展开。

参考网址：https://karpov.paris/（类似英雄形象效果）

我尝试探索了几个链接，所有链接都在解释缩小效果。

你能帮我满足我的要求吗？

提前致谢。

【问题讨论】：

builtwith.com/?https%3a%2f%2fkarpov.paris%2f

标签： html jquery css jquery-animate css-animations

【解决方案1】：

这里我做了一个简单的演示。我希望它可以帮助你。

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

body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.content{
	position: relative;
  min-height: 100vh;
  background-color: white;
  font-size: 30px;
  padding: 40px;
}
.zoom{
  height: 50%;
	overflow: hidden;
	padding-bottom: 55%;
}
.zoom img{
	position: fixed;
	top: 0%;
	left: 50%;
	max-width: 150%;
	transform: translateX(-50%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="zoom">
	<img src="https://picsum.photos/1200/1200" alt="img"/>
</div>

<div class="content">
  Put some content here.
</div>

【讨论】：