I am trying to change the background of a website by moving the mouse to the upper (turns to orange) or lower (turns to blue) half of the screen. It seems to work the way I imagined, but there's one problem: As soon as the blue event was triggered, I can't change it back to orange. It works the opposite way tho: So I can move the mouse to the top of the screen and it turns orange, then I move it to the lower part and it turns blue, but won't turn back to orange anymore:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.orange-theme {
background-color: orange;
}
.blue-theme {
background-color: blue;
}
</style>
</head>
<body>
<div style="height:50vh">
<button style="height:100%;width:100vw;opacity:0" class="orange" id="change-background-orange"/>
</div>
<img src="http://www.example.png" class="wp-image-124" style="float:centre;width:100%"/>
<div style="height:50vh">
<button style="height:100%;width:100vw;opacity:0" class="blue" id="change-background-blue"/>
</div>
<script>
document.getElementById("change-background-orange").addEventListener("mouseover", function() {
document.body.classList.add("orange-theme");
});
document.getElementById("change-background-blue").addEventListener("mouseover", function() {
document.body.classList.add("blue-theme");
});
</script>
</body>
</html>
I am also wondering, if there is any way to position the mouse pointer right in the centre of the page, when the site is being loaded. Because otherwise it might instantly change the colour. I'd prefer the website to be plain white, with only the image visible, as long as the mouse isn't moved.
Thanks in advance
Remove the css class you don't want while adding the css class you do want each time - ie:
document.body.classList.remove("blue-theme");
document.body.classList.add("orange-theme");
document.getElementById("change-background-orange").addEventListener("mouseover", function() {
document.body.classList.remove("blue-theme");
document.body.classList.add("orange-theme");
});
document.getElementById("change-background-blue").addEventListener("mouseover", function() {
document.body.classList.remove("orange-theme");
document.body.classList.add("blue-theme");
});.orange-theme {
background-color: orange;
}
.blue-theme {
background-color: blue;
}<div style="height:50vh">
<button style="height:100%;width:100vw;opacity:0" class="orange" id="change-background-orange"/>
</div>
<img src="http://www.example.png" class="wp-image-124" style="float:centre;width:100%"/>
<div style="height:50vh">
<button style="height:100%;width:100vw;opacity:0" class="blue" id="change-background-blue"/>
</div>But this might be more fun: Use a single mousemove listener and animate the body background using css transition. Rather than an IF/ELSE statement you can use the mouse position detection as the force parameter in classList.toggle
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/toggle
let c = document.querySelector("#container");
c.addEventListener("mousemove", e => {
document.body.classList.toggle("blue-theme", (e.offsetY < c.clientHeight / 2));
document.body.classList.toggle("orange-theme", (e.offsetY >= c.clientHeight / 2));
});body {
transition: background-color 0.5s ease;
}
.orange-theme {
background-color: orange;
}
.blue-theme {
background-color: blue;
}<div style="height:50vh" id="container">
<button style="height:100%;width:100vw;opacity:0" class="orange" id="change-background-orange" />
</div>
<img src="http://www.example.png" class="wp-image-124" style="float:centre;width:100%" />
<div style="height:50vh">
<button style="height:100%;width:100vw;opacity:0" class="blue" id="change-background-blue" />
</div>