1 篇博文含有标签「css」

视差滚动实践

2024年7月1日 · 阅读需 8 分钟

小学后生

Full Stack Developer

视差滚动是一种在网页设计和视频游戏中常见的视觉效果技术，它通过在不同速度上移动页面或屏幕上的多层图像，创造出深度感和动感。这种效果通过前景、中景和背景以不同的速度移动来实现，使得近处的对象看起来移动得更快，而远处的对象移动得较慢。

parallax-scroll

实现方式

1、background-attachment

通过配置该 CSS 属性值为fixed可以达到背景图像的位置相对于视口固定，其他元素正常滚动的效果。但该方法的视觉表现单一，没有纵深，缺少动感。

.parallax-box {
  width: 100%;
  height: 100vh;
  background-image: url("https://picsum.photos/800");
  background-size: cover;
  background-attachment: fixed;

  display: flex;
  justify-content: center;
  align-items: center;
}

2、Transform 3D

在 CSS 中使用 3D 变换效果，通过将元素划分至不同的纵深层级，在滚动时相对视口不同距离的元素，滚动所产生的位移在视觉上就会呈现越近的元素滚动速度越快，相反越远的元素滚动速度就越慢。

为方便理解，你可以想象正开车行驶在公路上，汽车向前移动，你转头看向窗外，近处的树木一闪而过，远方的群山和风景慢慢的渐行渐远，逐渐的在视野中消失，而天边的太阳却只会在很长的一段距离细微的移动。

.parallax {
  perspective: 1px; /* 设置透视效果，为3D变换创造深度感 */
  overflow-x: hidden;
  overflow-y: auto;
  height: 100vh;
}

.parallax__group {
  transform-style: preserve-3d; /* 保留子元素3D变换效果 */
  position: relative;
  height: 100vh;
}

.parallax__layer {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 背景层样式，设置为最远的层 */
.parallax__layer--back {
  transform: translateZ(-2px) scale(3);
  z-index: 1;
}

/* 中间层样式，设置为中等距离的层 */
.parallax__layer--base {
  transform: translateZ(-1px) scale(2);
  z-index: 2;
}

/* 前景层样式，设置为最近的层 */
.parallax__layer--front {
  transform: translateZ(0px);
  z-index: 3;
}

principle

通过设置 perspective 属性，为整个容器创建一个 3D 空间。

使用 transform-style: preserve-3d 保持子元素的 3D 变换效果。

将内容分为多个层（背景、中间、前景），使用 translateZ() 将它们放置在 3D 空间的不同深度。

对于较远的层（如背景层），使用 scale() 进行放大，以补偿由于距离产生的视觉缩小效果。

当用户滚动页面时，由于各层位于不同的 Z 轴位置，它们会以不同的速度移动，从而产生视差效果。

3、ReactScrollParallax

想得到更炫酷的滚动视差效果，纯 CSS 的实现方式就会有些吃力。

如下是在 React 中实现示例，通过监听滚动事件，封装统一的视差组件，来达到多样的动画效果。

const Parallax = ({ children, effects = [], speed = 1, style = {} }) => {
  // 状态hooks：用于存储动画效果的当前值
  const [transform, setTransform] = useState("");

  useEffect(() => {
    if (!Array.isArray(effects) || effects.length === 0) {
      console.warn("ParallaxElement: effects should be a non-empty array");
      return;
    }

    const handleScroll = () => {
      // 计算滚动进度
      const scrollProgress =
        (window.scrollY /
          (document.documentElement.scrollHeight - window.innerHeight)) *
        speed;

      let transformString = "";

      // 处理每个效果
      effects.forEach((effect) => {
        const { property, startValue, endValue, unit = "" } = effect;
        const value =
          startValue +
          (endValue - startValue) * Math.min(Math.max(scrollProgress, 0), 1);

        switch (property) {
          case "translateX":
          case "translateY":
            transformString += `${property}(${value}${unit}) `;
            break;
          case "scale":
            transformString += `scale(${value}) `;
            break;
          case "rotate":
            transformString += `rotate(${value}${unit}) `;
            break;
          // 更多的动画效果...
          default:
            console.warn(`Unsupported effect property: ${property}`);
        }
      });

      // 更新状态
      setTransform(transformString);
    };

    window.addEventListener("scroll", handleScroll);
    // 初始化位置
    handleScroll();

    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, [effects, speed]);

  // 渲染带有计算样式的子元素
  return <div style={{ ...style, transform }}>{children}</div>;
};