我已经成功地组装了一个定制游标,当悬停在不同的数据类型上时,它会改变.在本例中,当您将光标悬停在第一张图像上时,光标将更改为暂停图标,当您将光标悬停在第二张图像上时,光标将更改为播放图标,我想将播放图标更改为文本"Play"而不是图标.
const cursor = document.getElementById("cursor");
const animateCursor = (e, interacting) => {
const x = e.clientX - cursor.offsetWidth / 2,
y = e.clientY - cursor.offsetHeight / 2;
const keyframes = {
transform: `translate(${x}px, ${y}px) scale(${interacting ? 8 : 1})`
}
cursor.animate(keyframes, {
duration: 800,
fill: "forwards"
});
}
const getCursorClass = type => {
switch(type) {
case "video":
return "fa-solid fa-play";
case "image":
return "fa-solid fa-pause";
default:
return "fa-solid fa-arrow-up-right";
}
}
window.onmousemove = e => {
const interactable = e.target.closest(".interactable"),
interacting = interactable !== null;
const icon = document.getElementById("cursor-icon");
animateCursor(e, interacting);
cursor.dataset.type = interacting ? interactable.dataset.type : "";
if(interacting) {
icon.className = getCursorClass(interactable.dataset.type);
}
}
body {
background-color: rgb(20, 20, 20);
height: 100vh;
margin: 0px;
display: flex;
align-items: center;
justify-content: center;
gap: clamp(10px, 4vw, 100px);
}
body:hover > #cursor {
opacity: 1;
}
#cursor {
height: 20px;
width: 20px;
background-color: white;
border-radius: 20px;
position: fixed;
left: 0px;
top: 0px;
z-index: 10000;
pointer-events: none;
opacity: 0;
transition: opacity 500ms ease;
display: grid;
place-items: center;
}
#cursor:not([data-type=""]) > #cursor-icon {
opacity: 1;
}
#cursor-icon {
font-size: 6px;
line-height: 0px;
opacity: 0;
transition: opacity 400ms ease;
}
.interactable {
aspect-ratio: 1 / 1.5;
width: clamp(120px, 40vmin, 600px);
background-position: center 50%;
background-size: 100%;
opacity: 0.4;
transition: background-size 400ms ease, opacity 400ms ease;
}
.interactable:hover {
background-size: 105%;
opacity: 0.8;
}
<script src="https://kit.fontawesome.com/944eb371a4.js"></script>
<div id="cursor">
<i id="cursor-icon" class="fa-solid fa-arrow-up-right"></i>
</div>
<div
class="interactable"
data-type="image"
style="background-image: url(https://images.unsplash.com/photo-1657739774592-14c8f97eaece?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60)">
</div>
<div
class="interactable"
data-type="video"
style="background-image: url(https://images.unsplash.com/photo-1657779582398-a13b5896ff19?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzNXx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60)">
</div>