I am working on a script that can manipulate the size of a period symbol, making it increase and decrease in size while staying in one place.
However, I have encountered an issue where the element moves up or down the page when its size changes.
I tried adjusting the padding as the font size changes to prevent this movement, but it did not solve the problem.
Below is the Javascript code I have been using:
window.dotFluxOut = true;
var i = 1;
var pad = 50;
var dots = window.setInterval(function () {
var wait = document.getElementById("wait");
if (window.dotFluxOut) {
wait.style.fontSize = i + "px";
wait.style.padding = (pad - i) + "px";
i++;
} else {
wait.style.fontSize = i + "px";
wait.style.padding = (pad - i) + "px";
i--;
}
if (parseInt(wait.style.fontSize.replace("px", "")) > 180) {
window.dotFluxOut = false;
} else if (parseInt(wait.style.fontSize.replace("px", "")) < 3) {
window.dotFluxOut = true;
}
}, 5);
And here is the HTML code snippet:
<p id="wait" align="center" style="font-size: 160px">.</p>
EDIT:
If you want to see this script in action, check out this JSFiddle link.