前言
- 本文的案例代码并非作者原创。
- 本文次要解说 视差成果是如何实现的（原生三件套） ，本文并不波及性能优化相干的知识点解说（你就当我耍流氓吧）。
- 本文会从原理讲起，而后联合多个案例由浅入深去实现最终成果。
- 学废后帮我点个赞呗~
本文的 『举荐』 局部也别错过喔~
因为日常开发很少应用原生的形式去做视差成果。
在线演示
本文代码仓库
本文案例如图所示
原理
- 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')// 计算 translatefunction 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)// 默认返回 undefinedlet 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 神奇的边框特效》
《视差特效的原理和实现办法》
点赞 + 关注 + 珍藏 = 学会了