基于jQuery实现滚动解锁手机动画的技术问询

一、让手机元素固定至解锁完成后再随滚动移动 #

核心是通过滚动监听结合CSS定位切换，确保解锁动画完成前手机保持固定状态：

1. 初始定位设置
   给手机容器设置粘性定位，让它在解锁阶段固定在视口内：

.phone-container {
  position: sticky;
  top: 20px; /* 根据你的页面布局调整顶部间距 */
  transition: position 0s; /* 避免定位切换时出现不必要的过渡卡顿 */
}

2. 滚动触发定位切换
   监听页面滚动，当滚动距离超过解锁动画所需的阈值（或解锁状态标记触发）时，切换为静态定位让手机随页面滚动：

let isUnlocked = false; // 标记解锁是否完成
const unlockThreshold = 300; // 解锁完成对应的滚动高度（可根据动画时长/滚动速度调整）

// 解锁动画完成后调用此函数更新状态
function markUnlockComplete() {
  isUnlocked = true;
}

window.addEventListener('scroll', () => {
  const phone = document.querySelector('.phone-container');
  if (isUnlocked && window.scrollY > unlockThreshold) {
    phone.classList.add('scrollable');
  } else {
    phone.classList.remove('scrollable');
  }
});

3. 对应切换类的CSS

.phone-container.scrollable {
  position: static;
}

注：如果解锁是用户滑动触发的，把markUnlockComplete()绑定到解锁动画的animationend事件即可，确保只有解锁完成后才允许手机滚动。

二、实现侧边文本X轴正负方向分离的视差效果 #

利用滚动距离计算位移值，让左右文本向相反X轴方向移动，结合你已有的transformX函数实现：

1. 基础样式优化
   给文本元素添加性能优化属性，确保视差移动流畅：

.text-left, .text-right {
  will-change: transform;
  transition: transform 0.1s ease-out; /* 可选，让移动过渡更平滑 */
}

2. 滚动监听计算视差位移
   根据滚动距离，给左右文本分配相反方向的位移值，调用你的transformX函数生效：

const parallaxFactor = 0.3; // 视差系数，数值越大位移效果越明显

window.addEventListener('scroll', () => {
  const scrollY = window.scrollY;
  const leftDisplacement = -scrollY * parallaxFactor;
  const rightDisplacement = scrollY * parallaxFactor;

  // 调用你已编写的transformX函数
  transformX(document.querySelector('.text-left'), leftDisplacement);
  transformX(document.querySelector('.text-right'), rightDisplacement);
});

注：如果你的transformX函数需要调整参数格式，只需对应修改位移值的传入方式即可。

内容的提问来源于stack exchange，提问作者The Old County