这个效果是怎么做出来的
这是 iOS 相册、微信朋友圈都在用的招牌手势。核心逻辑：监听 pointer 事件，滚动到顶部边界后继续向下拖时进入拉伸态——拉距直接映射到头图的 scale 上（1 加上拉距的一个系数，封顶在 1.4 倍左右），覆盖在头图上的标题同步降低透明度。这里有个手感秘诀：超出部分要做打折映射，每多拖 1px 只放大半个像素的量，拉得越远阻力越大，这就是橡皮筋的感觉；如果没有打折，拉距会直来直去像扯生面团。
松手回弹用弹簧曲线（带轻微超调的 cubic-bezier），头图像被松开的橡皮一样荡回原位，而不是干巴巴地跳回去。性能上只碰 transform 和 opacity：头图缩放用 scale 而不是改高度，文字淡出只动 opacity，拖动全程零重排，中端手机也能跟手。
怎么用这条提示词
适合任何带头图的滚动页面：个人主页、文章详情、商品页、相册。发给 AI 时说明你的头图结构和滚动容器是谁，它会生成边界判断逻辑。真实项目里通常是「滚动到顶继续下拉」触发，demo 里为了直观做成了直接拖拽，两者的映射逻辑一致，交代清楚即可。
想效果更好？试试这些
拉伸系数控制在 0.3 到 0.5 之间，头图放大幅度别超过 1.5 倍，太夸张显得卡通。标题淡出要比头图缩放快一点（拉距 40% 时文字基本消失），避免文字被放大拉糊。头图里加 will-change: transform 提前分层，首次拖动不掉帧。如果页面用了原生滚动，记得在滚动容器上加 overscroll-behavior: contain，防止浏览器自带的下拉刷新和这个效果打架。