I'm designing a game user interface with a money indicator. Let's imagine the player has 0 dollars in their wallet, it should appear like this:
https://i.stack.imgur.com/35eoh.png
Please note that it is located in the upper right corner.
The position of the text is as follows:
right: 12.00vw;
top: 1.7vw;Now let's go unrealistic and assume the player has 50,000,000 dollars in their pocket. It would look like this instead: https://i.stack.imgur.com/Wugop.png
However, it should actually appear like this:
https://i.stack.imgur.com/quw3s.png
So, my question is, how can I make the text move towards the right direction when the amount of money in the pocket increases?
Here's the code snippet:
<div class="moneyhud"></div>
<div ID="hud">
<div id="top">
<span id="text4">50000000 $</span> <!-- Money -->
</div>
</div>
#text4 {
font-size: 1.5vw;
color: rgb(53, 143, 73);
position: absolute;
right: 12.00vw;
top: 1.7vw;
text-shadow: 4px 4px 10px #313131;
}
.moneyhud {
position: absolute;
background-image:
url("https://img.rehmann.online/a/fastlife/gruengeld.png");
background-repeat: no-repeat;
right: 1.00vw;
top: 2vw;
z-index: -1;
height: 30px;
width: 288px;
color: #fff;
}