I have this color theme change animations that are basically a circle that gets bigger fast with a color depending on which button you press.
My Problem is, that at the end of the animation the circle get's so wide and high, that the page size increases even though the circle position is set to absolute. I would like the page to stay the same size without beeing affected by the size of the circle.
Also if anyone has possible improvements to share let me know!
function ultraDarkMode(){
grow(0,0,0);
}
function whiteMode(){
grow(255,255,255);
}
function darkMode(){
grow(68,58,58);
}
function grow(r,g,b){
let circle = document.getElementById("circle");
let body = document.body;
circle.style.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ')';
circle.style.boxShadow = "0px 0px 50px 100px rgb(" + r + "," + g + "," + b + ")";
let i = 1;
let interval = setInterval(()=>{
circle.style.height = circle.clientHeight + 100 + "px";
circle.style.width = circle.clientWidth + 100 + "px";
if(i == 30) {
circle.style.height = 150 + "px";
circle.style.width = 150 + "px";
body.style.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ')';
clearInterval(interval);
}
i++;
}, 15)
}#circle{
width: 200px;
height: 200px;
background-color: darkgray;
border-radius: 50%;
position: absolute;
left: 50%;
top: -200px;
transform: translate(-50%, -50%);
box-shadow: 0px 0px 50px 100px darkgray;
z-index: -1;
/* offset x offset y blur radius spread radius und color */
}<button type="button" onclick=darkMode()>Darkmode</button>
<button type="button" onclick=whiteMode()>WhiteMode</button>
<button type="button" onclick=ultraDarkMode()>UltraDarkMode</button>
<div id="circle"></div>I added the following CSS to your #circle selector and it prevented the scrollbar from appearing.
#circle{
max-height: 100vh;
max-width: 100vw;
//...
}
Applying hidden overflow on body seems to work but I don't know how that may affect your futur code.
body{
overflow: hidden;
}