📖WordPress+Elementor 下滑动画

具体效果如下

首先导入模版,elementor-3386-2025-07-29

//CSS
.Home_ImgOne{
	position:relative;
	top:-146vh;
	z-index:5;
	left: 11vw;
}
.Home_ImgTwo{
	position:relative;
	top:-152vh;
	left:-5.5vw;
	z-index:4;
}
.Home_ImgThree{
	position:relative;
	top:-161vh;
	left:-18vw;
	z-index:3;
}
.Home_ImgFour{
	position:relative;
	top:-174vh;
	left:-32vw;
	z-index:2;
}
.Home_ImgFive{
	position:relative;
	top:-180vh;
	left:-44vw;
	z-index:1;
}

//JS
document.addEventListener('DOMContentLoaded', function () {
  // 配置对象：为每个图片设置独立的XY轴参数（单位均为 vw / vh）
  const imageConfigs = {
    '.Home_ImgOne': {
      maxTranslateY: 93.1,
      scrollFactorY: 0.12,
      maxTranslateX: -11, // 向左最多偏移 11vw
      scrollFactorX: 0.015
    },
    '.Home_ImgTwo': {
      maxTranslateY: 99.1,
      scrollFactorY: 0.12,
      maxTranslateX: 6, // 向右最多偏移 11vw
      scrollFactorX: 0.015
    },
    '.Home_ImgThree': {
      maxTranslateY: 108.1,
      scrollFactorY: 0.12,
      maxTranslateX: 19, // 向右最多偏移 22vw
      scrollFactorX: 0.030
    },
    '.Home_ImgFour': {
      maxTranslateY: 121.1,
      scrollFactorY: 0.12,
      maxTranslateX: 33, // 向右最多偏移 35vw
      scrollFactorX: 0.045
    },
    '.Home_ImgFive': {
      maxTranslateY: 127.1,
      scrollFactorY: 0.12,
      maxTranslateX: 45, // 向右最多偏移 47vw
      scrollFactorX: 0.065
    }
  };

  // 初始化所有图片元素
  const imageElements = {};
  Object.keys(imageConfigs).forEach(selector => {
    const element = document.querySelector(selector);
    if (element) {
      imageElements[selector] = {
        element,
        isAtMax: false,
        ...imageConfigs[selector]
      };
    }
  });

  // 更新单个图片的位置
  function updateImagePosition(imgData) {
    const scrollY = window.scrollY || window.pageYOffset;

    // Y轴滚动计算（vh单位）
    const targetY = Math.min(scrollY * imgData.scrollFactorY, imgData.maxTranslateY);

    // X轴滚动计算（vw单位，支持负方向）
    let targetX = 0;
    if (imgData.scrollFactorX !== 0) {
      const rawX = scrollY * Math.abs(imgData.scrollFactorX);
      if (imgData.maxTranslateX >= 0) {
        targetX = Math.min(rawX, imgData.maxTranslateX);
      } else {
        targetX = Math.max(-rawX, imgData.maxTranslateX);
      }
    }

    // 应用 3D transform
    imgData.element.style.transform = `translate3d(${targetX}vw, ${targetY}vh, 0px)`;

    // 检查是否达到最大Y偏移
    const nowAtMax = targetY >= imgData.maxTranslateY;
    if (nowAtMax && !imgData.isAtMax) {
      imgData.element.classList.add('Gundqiv');
      imgData.isAtMax = true;
    } else if (!nowAtMax && imgData.isAtMax) {
      imgData.element.classList.remove('Gundqiv');
      imgData.isAtMax = false;
    }
  }

  // 滚动监听，使用 requestAnimationFrame 优化性能
  let isScrolling;
  window.addEventListener('scroll', function () {
    window.cancelAnimationFrame(isScrolling);
    isScrolling = window.requestAnimationFrame(() => {
      Object.values(imageElements).forEach(updateImagePosition);
    });
  });

  // 页面初始化时更新一次位置
  Object.values(imageElements).forEach(updateImagePosition);
});