Currently, I'm in the process of developing a website that features custom cursors. These unique cursor designs change based on the background theme; however, an issue arises where the cursor defaults back to its original state when near or over the image of earth. Below is a snippet of my HTML code:
<div class="main-wrapper">
<div class="season winter" data-background="#2b1055">Winter</div>
<div class="season summer" data-background="#5988e2">Summer</div>
<div class="season spring" data-background="#7cdea1">Spring</div>
<div class="season autumn" data-background="#cf8a8a">Autumn</div>
</div>
<div class="wrapper">
<div>
<img id="earth" src="img/earth.png" alt="scroll">
</div>
</div>CSS Styling:
body {
transition: background 1s ease-in-out;
}
.season {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
color: #fff;
font-family: sans-serif;
font-size: 72px;
font-weight: 600;
text-transform: uppercase;
&[data-background="yellow"] { color: #333; };
}
.winter {
cursor: url('img/winter-cursor.png'), auto;
}
.summer {
cursor: url('img/summer-cursor.png'), auto;
}
.spring {
cursor: url('img/spring-cursor.png'), auto;
}
.autumn {
cursor: url('img/autumn-cursor.png'), auto;
}
.wrapper {
top: 120%;
left: 50%;
transform: translate(-50%, -50%);
position: fixed;
}
#earth {
width: 800px;
height: 800px;
}
Javascript functions (for rotating earth animation and background alteration during scrolling):
// Rotating earth
window.onscroll = function() {
scrollRotate();
};
function scrollRotate() {
let image = document.getElementById("earth");
image.style.transform = "rotate(" + window.pageYOffset / 24 + "deg)";
}
// Background change
window.sections = [...document.querySelectorAll('.season')];
window.lastScrollTop = window.pageYOffset;
document.body.style.background = window.sections[0].getAttribute('data-background');
window.addEventListener('scroll', onScroll);
function onScroll() {
const scrollTop = window.pageYOffset;
const section = window.sections
.map(section => {
const el = section;
const rect = el.getBoundingClientRect();
return {el, rect};
})
.find(section => section.rect.bottom >= (window.innerHeight * 0.5));
document.body.style.transition = 'background 1s cubic-bezier(0.3, 0.3, 0.3, 0.3)';
document.body.style.background = section.el.getAttribute('data-background');
}
I've attempted to resolve this issue by adjusting the positioning of elements within the HTML code, specifically by relocating the earth image downward. However, no solution seems to work effectively.
Moreover, I tested changing the cursor to "none" for #earth in the CSS file, but unfortunately, it resulted in the disappearance of the cursor altogether. Any feedback or suggestions regarding this matter would be highly valued. Thank you!