使用 GSAP 在悬停时显示光标图像 - 中心问题
Show cursor image on hover with GSAP - center issue
我正在使用 GSAP 在悬停时显示图像,该图像在四处移动时跟随光标,一切正常,但我无法将图像显示到 'center center' 光标,我错过了什么?
const items = document.querySelectorAll('.container')
items.forEach((el) => {
const image = el.querySelector('img')
el.addEventListener('mouseenter', (e) => {
gsap.to(image, { autoAlpha: 1 })
})
el.addEventListener('mouseleave', (e) => {
gsap.to(image, { autoAlpha: 0 })
})
el.addEventListener('mousemove', (e) => {
gsap.set(image, { x: e.offsetX })
})
})
.container {
position:relative;
background:#ff0000;
width:100%;
height:60px;
}
.container img {
position: absolute;
width: 200px;
height: 200px;
object-fit: cover;
transform: translateX(-50%) translateY(-50%);
top: 50%;
left: 50%;
z-index: -10;
opacity: 0;
visibily: hidden;
pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.1/gsap.min.js"></script>
<div class="container">
<img src="https://source.unsplash.com/random">
</div>
您需要从 .container img
中删除 left: 50%;
。
const items = document.querySelectorAll('.container')
items.forEach((el) => {
const image = el.querySelector('img')
el.addEventListener('mouseenter', (e) => {
gsap.to(image, { autoAlpha: 1 })
})
el.addEventListener('mouseleave', (e) => {
gsap.to(image, { autoAlpha: 0 })
})
el.addEventListener('mousemove', (e) => {
gsap.set(image, { x: e.offsetX })
})
})
.container {
position:relative;
background:#ff0000;
width:100%;
height:60px;
}
.container img {
position: absolute;
width: 200px;
height: 200px;
object-fit: cover;
transform: translateX(-50%) translateY(-50%);
top: 50%;
z-index: -10;
opacity: 0;
visibily: hidden;
pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.1/gsap.min.js"></script>
<div class="container">
<img src="https://source.unsplash.com/random">
</div>
我正在使用 GSAP 在悬停时显示图像,该图像在四处移动时跟随光标,一切正常,但我无法将图像显示到 'center center' 光标,我错过了什么?
const items = document.querySelectorAll('.container')
items.forEach((el) => {
const image = el.querySelector('img')
el.addEventListener('mouseenter', (e) => {
gsap.to(image, { autoAlpha: 1 })
})
el.addEventListener('mouseleave', (e) => {
gsap.to(image, { autoAlpha: 0 })
})
el.addEventListener('mousemove', (e) => {
gsap.set(image, { x: e.offsetX })
})
})
.container {
position:relative;
background:#ff0000;
width:100%;
height:60px;
}
.container img {
position: absolute;
width: 200px;
height: 200px;
object-fit: cover;
transform: translateX(-50%) translateY(-50%);
top: 50%;
left: 50%;
z-index: -10;
opacity: 0;
visibily: hidden;
pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.1/gsap.min.js"></script>
<div class="container">
<img src="https://source.unsplash.com/random">
</div>
您需要从 .container img
中删除 left: 50%;
。
const items = document.querySelectorAll('.container')
items.forEach((el) => {
const image = el.querySelector('img')
el.addEventListener('mouseenter', (e) => {
gsap.to(image, { autoAlpha: 1 })
})
el.addEventListener('mouseleave', (e) => {
gsap.to(image, { autoAlpha: 0 })
})
el.addEventListener('mousemove', (e) => {
gsap.set(image, { x: e.offsetX })
})
})
.container {
position:relative;
background:#ff0000;
width:100%;
height:60px;
}
.container img {
position: absolute;
width: 200px;
height: 200px;
object-fit: cover;
transform: translateX(-50%) translateY(-50%);
top: 50%;
z-index: -10;
opacity: 0;
visibily: hidden;
pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.1/gsap.min.js"></script>
<div class="container">
<img src="https://source.unsplash.com/random">
</div>