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