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

Posted 2023-05-08

【中文标题】想用 css 或 jquery 对图像进行滚动效果

【英文标题】：Want to make Scrolling Effect on image with css or jquery

【发布时间】：2020-08-29 11:06:36

【问题描述】：

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

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

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

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

提前致谢。

【问题讨论】：

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

【参考方案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" />
</div>

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