乐趣区

关于前端:视差特效的原理和实现方法

jiezi

前言

  1. 本文的案例代码并非作者原创。
  2. 本文次要解说 视差成果是如何实现的（原生三件套），本文并不波及性能优化相干的知识点解说（你就当我耍流氓吧）。
  3. 本文会从原理讲起，而后联合多个案例由浅入深去实现最终成果。
  4. 学废后帮我点个赞呗~

本文的 『举荐』 局部也别错过喔~

因为日常开发很少应用原生的形式去做视差成果。

🐱‍💻在线演示

🐱‍👓本文代码仓库

本文案例如图所示

原理

  • pc 端的视差成果通常是 依据鼠标、键盘、滚动条的变动和操作 进行视觉上的差异化管制。
  • 挪动端可能还会有 重力陀螺仪 之类的交互，本文不讲挪动端。

举些例子：

  • 鼠标移到屏幕左上方：某元素就飞到屏幕右下方（跟鼠标反着来）。
  • 页面往下滑动：背景图不动，文本元素等其余元素往上挪动。
  • ……

我放几个例子让大家直观感受一下：

【点击跳转在线预览：⭐⭐鼠标挪动的视差成果⭐⭐】

【点击跳转在线预览：应用 GSAP 的视差层成果特效（滚动鼠标滚轮）】

【点击跳转在线预览：歪斜成果（鼠标挪动）】

【点击跳转在线预览：创意广告视差成果（鼠标挪动）】

实现

了解了实现的原理，那实现的要害就是 事件监听 addEventListener 了。

简略例子

先来一个简略的例子玩玩

这个例子实现的成果是：鼠标往左移，元素就网右移；鼠标往上移，元素就往下移。

<style>
.box {
  width: 200px;
  height: 300px;
  background: lightblue;
  position: absolute; /* 相对定位 */
}
</style>


<div class="box"></div>


<script>
  // 获取 .box 元素
  const box = document.querySelector('.box')
  
  // 整个文档的事件监听（鼠标挪动 mousemove）document.addEventListener('mousemove', e => {
    // 获取鼠标以后地位的 x 也 y 坐标，别离设置在 .box 的 right 和 bottom
    box.style.right = e.clientX + 'px'
    box.style.bottom = e.clientY + 'px'
  })
</script>

当鼠标在页面左上方（退出 x 和 y 坐标别离是 10 和 20），就设置元素在页面右下方（右：10，下：20）。

就是依据《原理》里讲的那样去实现。

如果不懂 clientX 和 clientY，能够看看上面这篇文章：

《JS 事件对象 clientX , clientY , screenX , screenY , offsetX , offsetY 的区别》

留神：

本例应用了 right 和 left 挪动元素。之所以这样做，是为了从最简略的形式解说和实现。

理论开发中这会带来肯定的 布局问题 和 性能问题（会导致布局更改或从新绘制，并会导致动画不稳固。），举荐优先思考应用 transforms 对元素进行挪动等操作。

进阶版

好玩的交互除了挪动元素外，还能够挪动背景图地位、旋转元素等操作。

同时还须要思考元素的 动画幅度。像下面的例子就齐全没管制元素挪动幅度，所以当鼠标挪动到屏幕最右侧或者最底部的时候，元素就会超出屏幕。这兴许不是一种好的操作体验。

说到 动画幅度 ，就要思考 参照物 的事件。常见的参照物有浏览器宽高、容器宽高、容器地位等。

比方这个例子：

这个例子所操控的元素看上去很多，但其实逐层拆分，逐层管制起来就很简略。

要思考的因素包含：

  • 容器旋转
  • 背景图轻微挪动
  • 人物追随鼠标挪动

这里的参照物是 鼠标地位与文档的宽高比例，并通过本人设置的公式来限度元素挪动或旋转的范畴。

1、容器旋转

创立一个 div 容器，设置了暗影。

<div class="card"></div>

<style>
  html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }

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

  /* 容器 */
  .card {
    width: 175px;
    height: 250px;
    border-radius: 8px;
    box-shadow: 0px 10px 20px 20px rgba(0, 0, 0, 0.17);
  }
</style>

通过 JS 管制容器旋转

// 获取容器元素
const card = document.querySelector('.card')

// 计算函数
function computedTransform(num, doc) {return (num / doc * 40 - 20).toFixed(1)
}

// 给文档增加一个鼠标挪动的事件监听
document.addEventListener('mousemove', e => {
  // 旋转容器
  card.style.transform = `
    rotateX(${computedTransform(e.clientX, window.innerWidth)}deg)
    rotateY(${computedTransform(e.clientY, window.innerHeight)}deg)
  `
})

2、挪动背景图

增加背景图

<!-- 省略局部反复代码 -->

<style>
  .card {
    width: 175px;
    height: 250px;
    border-radius: 8px;
    box-shadow: 0px 10px 20px 20px rgba(0, 0, 0, 0.17);
    background-image: url(./img/3dr_spirited.jpg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 110% 110%;
  }
</style>

这段 css 次要看最初增加的 4 行（background 相干）。

间接在 css 里通过 background-image 增加一个背景图，背景图不反复，起始地位在核心，背景图比容器略微大一点点，但不会超出容器。

JS 管制：背景图也追随鼠标挪动

录制的 GIF 有点小问题，最初呈现了鼠标残影，先将就看着成果吧。

/* 省略局部反复代码 */

const card = document.querySelector('.card')

// 计算
function computedBGPosition(num, doc) {return (60 - Number((num / doc * 20).toFixed(1)) + '%')
}

// 给文档增加鼠标挪动的事件监听
document.addEventListener('mousemove', e => {
  // 挪动背景
  card.style.backgroundPosition = `
    ${computedBGPosition(e.clientX, window.innerWidth)} 
    ${computedBGPosition(e.clientY, window.innerHeight)}
  `
})

这部分的挪动幅度我管制在一个比拟小的范畴内，应用 background-position 来管制背景图起始地位。

再联合 『1、容器旋转』 的代码，就变成如下所示的成果：

3、挪动图片（人物）

人物追随鼠标挪动

残缺代码

<style>
  html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }

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

  /* 容器 */
  .card {
    width: 175px;
    height: 250px;
    overflow: hidden;
    background-image: url(./img/3dr_spirited.jpg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 110% 110%;
    transform-origin: 50% 50%;
    perspective: 1800px;
    transform-style: preserve-3d;
    border-radius: 8px;
    box-shadow: 0px 10px 20px 20px rgba(0, 0, 0, 0.17);
  }

  /* 图片款式（小千）*/
  .card img {
    height: 100%;
    position: relative;
    top: 25px;
    left: 25px;
  }
</style>

<div class="card">
  <img src="./img/3dr_chihiro.png" alt="">
</div>

<script>
  // 容器
  const card = document.querySelector('.card')
  // 人物（小千）const img = card.querySelector('img')

  // 挪动背景图的计算方法
  function computedBGPosition(num, doc) {return (60 - Number((num / doc * 20).toFixed(1)) + '%')
  }

  // 计算 translate
  function computedTransform(num, doc) {return (num / doc * 40 - 20).toFixed(1)
  }

  // 给文档增加一个鼠标挪动的事件监听 
  document.addEventListener('mousemove', e => {
    // 旋转容器
    card.style.transform = `
      rotateX(${computedTransform(e.clientX, window.innerWidth)}deg)
      rotateY(${computedTransform(e.clientY, window.innerHeight)}deg)
    `

    // 挪动背景
    card.style.backgroundPosition = `
      ${computedBGPosition(e.clientX, window.innerWidth)} 
      ${computedBGPosition(e.clientY, window.innerHeight)}
    `

    // 挪动图片
    img.style.transform = `
      translateX(${computedTransform(e.clientX, window.innerWidth)}px)
      translateY(${computedTransform(e.clientY, window.innerHeight)}px)
    `
  })
</script>

款式局部：

  • 容器：须要设置 overflow: hidden;，图片在挪动过程中超出的局部不展现
  • 人物图片：人物须要设置 position: relative;，并且往下挪动一点，这样能够暗藏下半身。

JS 局部：

const img = card.querySelector('img')

// 计算 translate
function computedTransform(num, doc) {return (num / doc * 40 - 20).toFixed(1)
}

img.style.transform = `
  translateX(${computedTransform(e.clientX, window.innerWidth)}px)
  translateY(${computedTransform(e.clientY, window.innerHeight)}px)
`

次要增加了这部分，通过 鼠标以后地位和屏幕宽高 来计算出图片挪动的间隔。

终极版

下面的 『进阶版』 解说了实现视差成果的机密。

平时见到更加简单的成果，其实能够把元素逐个拆分，逐个管制。

比方本文的终极版成果：

这部分的解说都放在代码正文里，倡议本人建一个我的项目来运行。

有不懂的中央能够在评论区交换探讨。

残缺代码如下所示。

<style>
  .page__x {
    width: 1000px;
    height: 700px;
    /* 居中布局 */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* 设置元素被查看地位的视图 */
    perspective: 1800px;
    /* 背景色（兼容性写法）*/
    background: #642b73;
    background: linear-gradient(to bottom, #c6426e, #642b73);
  }

  /* Popular */
  h1 {
    /* 底部外边距 */
    margin-bottom: 30px;
    /* z 轴偏移 */
    transform: translateZ(35px);
    /* 字母间距 */
    letter-spacing: -1px;
    /* 字号 */
    font-size: 32px;
    /* 字体粗细 */
    font-weight: 800;
    /* 字体色彩 */
    color: #3e3e42;
  }

  /* Movies */
  h3 {
    /* 底部外边距 */
    margin-bottom: 6px;
    /* z 轴偏移 */
    transform: translateZ(25px);
    /* 字号 */
    font-size: 16px;
    /* 字体色彩 */
    color: #eb285d;
  }

  /* 卡片主容器 */
  .cards {
    /* 行内块元素 */
    display: inline-block;
    /* 最小宽度 */
    min-width: 595px;
    /* 内边距 */
    padding: 30px 35px;
    /* 设置元素被查看地位的视图 */
    perspective: 1800px;
    /* 旋转基点 */
    transform-origin: 50% 50%;
    /* 使被转换的子元素保留其 3D 转换 */
    transform-style: preserve-3d;
    /* 圆角 */
    border-radius: 15px;
    /* 文本左对齐 */
    text-align: left;
    /* 背景色 */
    background: #fff;
    /* 投影 */
    box-shadow: 0px 10px 20px 20px rgba(0, 0, 0, 0.17);
  }

  /* 卡片 */
  .card {
    /* 行内块元素 */
    display: inline-block;
    /* 宽 */
    width: 175px;
    /* 高 */
    height: 250px;
    /* 绝对定位 */
    position: relative;
    /* 暗藏溢出局部 */
    overflow: hidden;
    /* 设置元素被查看地位的视图 */
    perspective: 1200px;
    /* 使被转换的子元素保留其 3D 转换 */
    transform-style: preserve-3d;
    /* z 轴偏移 */
    transform: translatez(35px);
    /* 过渡 */
    transition: transform 200ms ease-out;
    /* 文本居中对齐 */
    text-align: center;
    /* 圆角 */
    border-radius: 15px;
    /* 投影 */
    box-shadow: 5px 5px 20px -5px rgba(0, 0, 0, 0.6);
  }

  /* 除了最初一个卡片之外的卡片 */
  .card:not(:last-child) {
    /* 右侧外边距 */
    margin-right: 30px;
  }

  /* 卡片的图片 */
  .card__img {
    /* 绝对定位 */
    position: relative;
    /* 高度 */
    height: 100%;
  }

  /* 卡片背景 */
  .card__bg {
    bottom: -50px;
    left: -50px;
    position: absolute;
    right: -50px;
    top: -50px;
    /* 旋转基点 */
    transform-origin: 50% 50%;
    transform: translateZ(-50px);
    z-index: 0;
  }

  /* 幽灵公主 图片 */
  .princess-mononoke .card__img {
    top: 14px;
    right: -10px;
    height: 110%;
  }

  /* 幽灵公主 背景 */
  .princess-mononoke .card__bg {background: url("img/3dr_monobg.jpg") center/cover no-repeat;
  }

  /* 千与千寻 图片 */
  .spirited-away .card__img {top: 25px;}

  /* 千与千寻 背景 */
  .spirited-away .card__bg {background: url("img/3dr_spirited.jpg") center/cover no-repeat;
  }

  /* 哈尔的挪动城堡 图片 */
  .howl-s-moving-castle .card__img {
    top: 5px;
    left: -4px;
    height: 110%;
  }

  /* 哈尔的挪动城堡 背景 */
  .howl-s-moving-castle .card__bg {background: url("img/3dr_howlbg.jpg") center/cover no-repeat;
  }

  /* 卡片的文本内容 */
  .card__text {
    /* 弹性布局 */
    display: flex;
    /* 主轴为垂直方向 */
    flex-direction: column;
    /* 主轴居中对齐 */
    justify-content: center;
    /* 穿插轴的中点对齐 */
    align-items: center;
    /* 宽 */
    width: 100%;
    /* 高 */
    height: 70px;
    /* 相对定位 */
    position: absolute;
    /* 重叠程序 */
    z-index: 2;
    /* 离底部间隔 */
    bottom: 0;
    /* 背景色：突变 */
    background: linear-gradient(to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.55) 100%);
  }

  /* 卡片的题目 */
  .card__title {
    /* 底部外边距 */
    margin-bottom: 3px;
    /* 设置左右 10px 内边距 */
    padding: 0 10px;
    /* 字号 */
    font-size: 18px;
    /* 字体的粗细 */
    font-weight: 700;
    /* 字体色彩 */
    color: #fff;
  }
</style>

<div class="page__x" id="pageX">
  <div class="cards">
    <h3>Movies</h3>
    <h1>Popular</h1>
    <!-- 幽灵公主 -->
    <div class="card princess-mononoke">
      <div class="card__bg"></div>
      <img class="card__img" src="./img/3dr_mono.png" />
      <div class="card__text">
        <p class="card__title">Princess Mononoke</p>
      </div>
    </div>
    <!-- 千与千寻 -->
    <div class="card spirited-away">
      <div class="card__bg"></div>
      <img class="card__img" src="./img/3dr_chihiro.png" />
      <div class="card__text">
        <p class="card__title">Spirited Away</p>
      </div>
    </div>
    <!-- 哈尔的挪动城堡 -->
    <div class="card howl-s-moving-castle">
      <div class="card__bg"></div>
      <img class="card__img" src="./img/3dr_howlcastle.png" />
      <div class="card__text">
        <p class="card__title">Howl's Moving Castle</p>
      </div>
    </div>
  </div>
</div>

<script>
// 页面容器
const pageX = document.querySelector('#pageX')
// 卡片容器
const cards = document.querySelector('.cards')
// 所有图片
const images = document.querySelectorAll('.card__img')
// 所有背景
const backgrounds = document.querySelectorAll('.card__bg')

// 旋转角度系数
let range = 40

// 旋转公式（返回 -20 ~ 20，保留 1 为小数）let calcValue = (a, b) => (a / b * range - range / 2).toFixed(1)

// 默认返回 undefined
let timeout = void 0

// 视差动画函数
// e：鼠标挪动事件的参数
function parallax(e) {
  let x = e.x // 指针 x 轴地位
  let y = e.y // 指针 y 轴地位

  // 如果 timeout 曾经存在，就勾销一个先前通过调用 window.requestAnimationFrame() 办法增加到打算中的动画帧申请。if (timeout) {
    // 这是一个试验中的性能，此性能某些浏览器尚在开发中
    window.cancelAnimationFrame(timeout);
  }

  // 在下次重绘之前调用指定的回调函数更新动画
  timeout = window.requestAnimationFrame(function () {
    // 通过 calcValue 依据鼠标以后地位和容器宽高比计算得出的值
    let xValue = calcValue(x, pageX.offsetWidth)
    let yValue = calcValue(y, pageX.offsetHeight)

    // 设置卡片容器的旋转角度
    cards.style.transform = "rotateX(" + yValue + "deg) rotateY(" + xValue + "deg)";

    // 设置所有图片的位移
    images.forEach(item => {item.style.transform = "translateX(" + -xValue + "px) translateY(" + yValue + "px)"
    })

    // 设置所有背景图的地位
    backgrounds.forEach(item => {item.style.backgroundPosition = xValue * .45 + "px" + -yValue * .45 + "px"})
  })
}

window.onload = () => {
  // 监听鼠标在 pageX 容器挪动
  pageX.addEventListener('mousemove', parallax, false)
}

// 来到页面前移除监听
window.onbeforeunload = () => {pageX.removeEventListener('mousemove', parallax)
}
</script>

知识点补充阐明

《JS 事件对象 clientX , clientY , screenX , screenY , offsetX , offsetY 的区别》

《JS 事件监听 addEventListener()》

《JS 移除事件侦听器 removeEventListener()》

举荐

日常开发中很少间接用原生的形式去实现视差成果的。

这里举荐一个 轻量 JS 动画库：『Anime.js』

这个库的用法太简略了，间接看《官网文档》就晓得怎么用了，本文不进行解说。

👍《『Three.js』腾飞！》

👍《纯 css 实现 117 个 Loading 成果》

👍《纯 CSS：动静突变背景【一分钟学会】》

👍《这 18 个网站能让你的页面背景炫酷起来》

👍《纯 CSS 神奇的边框特效》

👍《视差特效的原理和实现办法》
点赞 + 关注 + 珍藏 = 学会了

退出移动版