使用 useParallax 创建图片视差效果

前言

得益于 vue3 在社区的收欢迎度，各种基于 vue3 的组件库的活跃度也日益增长，在众多组件库中 ElementPlus 尤为受到大家欢迎，在 Github 上已经有 16.7K 的星星。

ElementPlus 保留了 Element UI 的整体风格，在官网的设计上也大同小异，但是有心的小伙伴可能发现了 ElementPlus 的官网图是具有动态视差效果的。如文章封面图所示，看起来很是炫酷。

好奇他是如何实现的，我就去看了 它的源码，发现 ElementPlus 的官网首页图的视差效果是用 @vueuse/core 中的 useParallax 实现的。

那么如何使用 useParallax 实现这种视差效果，以及它的原理是什么呢？

什么是视差？

视差是指从两个不同位置观察同一个物体时，此物体在视野中的位置变化与差异。视差使页面富有层次感。使静态的页面活了起来，增强了网页的趣味性。

useParallax

VueUse 的 useParallax 将帮助开发者更加容易的创建视差效果。支持鼠标和方向感应器，也就是说在移动端也是可以创建出这种视差效果的。

如何使用：

首先需要定义一个容器，我们将要创建的视差效果存在这个容器中，以 web 端为例，当我们移动鼠标时，useParallax 会给我们提供旋转以及倾斜角度，然后将这些值，给到容器中元素的变化上去，主要利用 CSS 的 tranform 属性。

import { useParallax } from '@vueuse/core'

export default {
  setup() {
    const container = ref(null)
    const { tilt, roll, source } = useParallax(container)

    return {
      container,
    }
  },
}

• roll : 旋转角度，取值范围在（-0.5 - 0.5）
• tilt：倾斜角度， 取值范围在（-0.5 - 0.5）
• source：传感器源，可以是“鼠标”或“设备方向感应器”

实例

const layer0 = computed(() => ({
  ...layerBase,
  transform: `translateX(${parallax.tilt * 10}px) translateY(${
    parallax.roll * 10
  }px) scale(1.33)`,
}))

layer0 是其中一个元素的样式，在倾斜角度，以及旋转角度变化时，给其赋值，以达到视差的效果。

猫眼2.0：

ElementPlus: