鼠标视差
Parallax with mouse
我正在尝试 'transform' 个元素,当鼠标在页面上移动时在此处 img。我已经集成了一个原始代码来创建这种效果,并认为我理解它,但似乎我错了。代码片段中的元素是橙色方块 (3.png),但我也想将此效果应用于后面的人物图片 (2.png),但不知道如何操作。 (这里是完整的代码,因为我不知道除了我的整个架构之外有什么问题:https://github.com/KPq66dw8L/b-code-fiverr)
<section class="container bot-container-img">
<img class="layer closeUp" src="images/1.png" data-speeed="2" alt="">
<img class="layer ellipse2" src="images/2.png" data-speeed="-5" alt="">
<img class="layer" src="images/images/3.png" data-speed="2" alt="">
</section>
CSS:
.bot-container-img {
grid-row-start: 3;
grid-column-start: 1;
grid-column-end: 3;
width: 100%;
height: 100%;
}
section {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
align-items: flex-end;
justify-content: flex-start;
}
section img {
position: absolute;
object-fit: cover;
width: 100%;
height: 100%;
}
JS:
document.addEventListener("mousemove", parallax);
function parallax(e){
this.querySelectorAll('.layer').forEach(layer => {
const speed = layer.getAttribute('data-speed')
const x = (window.innerWidth - e.pageX*speed)/100
const y = (window.innerHeight - e.pageY*speed)/100
layer.style.transform = `translateX(${x}px) translateY(${y}px)`
})
}
我更正了一些小错误:
- 打字错误
data-speeed="2"
更正为 data-speed="2"
- 我更喜欢
getBoundingClientRect()
而不是 window.innerWidth
/ window.innerHeight
- 受视差影响的项目使用
left
、top
、width
、height
和负 margin-left
和 margin-top
- 这允许 transform.translate
属性 相对于它们的中心 平移它们
- 我将所有逻辑封装到一个不错的
applyParallax
函数中,以防您希望将其应用于多个 section
元素
我还必须进行一些更改才能使其与 Whosebug 的代码段系统一起使用:
- 我使用
<div class="img"></div>
而不是 <img>
,使用 css 为不同的 div.img
元素着色
- 我减小了
div.img
元素的大小,使效果在小 window 中更明显
- 我增加了
data-speed
的值,使效果更明显
- 我让
html
和 body
元素填满了整个视口(section
元素填满了整个 body
元素)
let applyParallax = section => {
section.addEventListener('mousemove', e => {
let { width, height } = section.getBoundingClientRect();
let offX = e.pageX - (width * 0.5);
let offY = e.pageY - (height * 0.5);
for (let layer of document.querySelectorAll('.img')) {
const speed = layer.getAttribute('data-speed')
const x = (offX * speed) / 100;
const y = (offY * speed) / 100;
layer.style.transform = `translateX(${x}px) translateY(${y}px)`
}
});
section.addEventListener('mouseleave', e => {
for (let layer of document.querySelectorAll('.img')) {
layer.style.transform = `translateX(0px) translateY(0px)`
}
});
};
applyParallax(document.querySelector('section'));
html, body { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; }
section {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
align-items: flex-end;
justify-content: flex-start;
}
section > .img {
position: absolute;
left: 50%; top: 50%;
width: 120px; height: 120px;
margin-left: -60px; margin-top: -60px;
}
section > .img.r { background-color: rgba(200, 0, 0, 0.5); }
section > .img.g { background-color: rgba(0, 200, 0, 0.4); }
section > .img.b { background-color: rgba(0, 0, 200, 0.3); }
<section class="container bot-container-img">
<div class="img r" data-speed="22"></div>
<div class="img g" data-speed="-5"></div>
<div class="img b" data-speed="32"></div>
</section>
我正在尝试 'transform' 个元素,当鼠标在页面上移动时在此处 img。我已经集成了一个原始代码来创建这种效果,并认为我理解它,但似乎我错了。代码片段中的元素是橙色方块 (3.png),但我也想将此效果应用于后面的人物图片 (2.png),但不知道如何操作。 (这里是完整的代码,因为我不知道除了我的整个架构之外有什么问题:https://github.com/KPq66dw8L/b-code-fiverr)
<section class="container bot-container-img">
<img class="layer closeUp" src="images/1.png" data-speeed="2" alt="">
<img class="layer ellipse2" src="images/2.png" data-speeed="-5" alt="">
<img class="layer" src="images/images/3.png" data-speed="2" alt="">
</section>
CSS:
.bot-container-img {
grid-row-start: 3;
grid-column-start: 1;
grid-column-end: 3;
width: 100%;
height: 100%;
}
section {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
align-items: flex-end;
justify-content: flex-start;
}
section img {
position: absolute;
object-fit: cover;
width: 100%;
height: 100%;
}
JS:
document.addEventListener("mousemove", parallax);
function parallax(e){
this.querySelectorAll('.layer').forEach(layer => {
const speed = layer.getAttribute('data-speed')
const x = (window.innerWidth - e.pageX*speed)/100
const y = (window.innerHeight - e.pageY*speed)/100
layer.style.transform = `translateX(${x}px) translateY(${y}px)`
})
}
我更正了一些小错误:
- 打字错误
data-speeed="2"
更正为data-speed="2"
- 我更喜欢
getBoundingClientRect()
而不是window.innerWidth
/window.innerHeight
- 受视差影响的项目使用
left
、top
、width
、height
和负margin-left
和margin-top
- 这允许transform.translate
属性 相对于它们的中心 平移它们
- 我将所有逻辑封装到一个不错的
applyParallax
函数中,以防您希望将其应用于多个section
元素
我还必须进行一些更改才能使其与 Whosebug 的代码段系统一起使用:
- 我使用
<div class="img"></div>
而不是<img>
,使用 css 为不同的div.img
元素着色 - 我减小了
div.img
元素的大小,使效果在小 window 中更明显
- 我增加了
data-speed
的值,使效果更明显 - 我让
html
和body
元素填满了整个视口(section
元素填满了整个body
元素)
let applyParallax = section => {
section.addEventListener('mousemove', e => {
let { width, height } = section.getBoundingClientRect();
let offX = e.pageX - (width * 0.5);
let offY = e.pageY - (height * 0.5);
for (let layer of document.querySelectorAll('.img')) {
const speed = layer.getAttribute('data-speed')
const x = (offX * speed) / 100;
const y = (offY * speed) / 100;
layer.style.transform = `translateX(${x}px) translateY(${y}px)`
}
});
section.addEventListener('mouseleave', e => {
for (let layer of document.querySelectorAll('.img')) {
layer.style.transform = `translateX(0px) translateY(0px)`
}
});
};
applyParallax(document.querySelector('section'));
html, body { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; }
section {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
align-items: flex-end;
justify-content: flex-start;
}
section > .img {
position: absolute;
left: 50%; top: 50%;
width: 120px; height: 120px;
margin-left: -60px; margin-top: -60px;
}
section > .img.r { background-color: rgba(200, 0, 0, 0.5); }
section > .img.g { background-color: rgba(0, 200, 0, 0.4); }
section > .img.b { background-color: rgba(0, 0, 200, 0.3); }
<section class="container bot-container-img">
<div class="img r" data-speed="22"></div>
<div class="img g" data-speed="-5"></div>
<div class="img b" data-speed="32"></div>
</section>