I have the following code:
#containerScroll { height: 5em; } scroll { transform: translateY(0%) rotate(45deg); opacity: 0; } .first-scroll { left: calc(52.3% - 1em) !important; width: 2em; height: 2em; background-color: transparent; z-index: 80; bottom: 25px; border-width: 0 0.25em 0.25em 0; border-style: solid; border-color: black; position: absolute; animation: scrolldown1 1.2s ease-in-out infinite 0.15s; } .second-scroll { left: calc(52.3% - 1em) !important; width: 2em; height: 2em; background-color: transparent; z-index: 80; bottom: 40px; position: absolute; border-width: 0 0.25em 0.25em 0; border-style: solid; border-color: black; animation: scrolldown1 1.2s ease-in-out infinite; } @keyframes scrolldown1 { 0% { transform: translateY(20%) rotate(45deg); opacity: 0.7; } 50% { transform: translateY(0%) rotate(45deg); opacity: 0.2; } 100% { transform: translateY(20%) rotate(45deg); opacity: 0.7; } }
<div id="containerScroll"> <scroll class="first-scroll"></scroll> <scroll class="second-scroll"></scroll> </div>
On my end, the output is looking like this:
This is exactly what I want since the scroll down button is aligned right on top of the text and I achieved this by setting left: calc(52.3% - 1em) !important;
. On my end, this property is whats making it align perfectly on top of the text.
The problem is that when I zoom out, I’m getting this output:
As you can see, the scroll button alignment changes and its moved towards the right, and it is because of the left: calc(52.3% - 1em) !important;
property I’m pretty sure. But I do not want to change or remove this property since this is whats making it align perfectly on 100% zoom
. Is there a way to make this fixed? For example, when I zoom out on the website, the scroll button alignment does not change and remains constant? Any suggestions?
Advertisement
Answer
That’s a really cool animation!
To perfectly center it, I made the following changes:
- This was being used to center the div,
left: calc(52.3% - 1em) !important;
; I have removed this completely and have used a simple<center>
tag to center it. - The animation code itself then runs directly right of center (which is off-center). You can fix this by moving an element to the left of itself by 50% of its own width with
translateX(-50%)
. - Of course, you can’t actually use
50%
, because a square box, rotated on its side, increases its width by a factor of about45%
, which means we need to translateY not by50%
, but by66%
.
#containerScroll { height: 5em; } scroll { transform: translateY(0%) rotate(45deg); opacity: 0; } .first-scroll { margin: auto; width: 2em; height: 2em; background-color: transparent; z-index: 80; bottom: 25px; border-width: 0 0.25em 0.25em 0; border-style: solid; border-color: black; position: absolute; animation: scrolldown1 1.2s ease-in-out infinite 0.15s; } .second-scroll { width: 2em; height: 2em; background-color: transparent; z-index: 80; bottom: 40px; position: absolute; border-width: 0 0.25em 0.25em 0; border-style: solid; border-color: black; animation: scrolldown1 1.2s ease-in-out infinite; } @keyframes scrolldown1 { 0% { transform: translateY(20%) rotate(45deg) translateX(-66%); opacity: 0.7; } 50% { transform: translateY(0%) rotate(45deg) translateX(-66%); opacity: 0.2; } 100% { transform: translateY(20%) rotate(45deg) translateX(-66%); opacity: 0.7; } }
<div id="containerScroll"> <center> <scroll class="first-scroll"></scroll> <scroll class="second-scroll"></scroll> </center> </div> <div style="border:1px solid black;"> <center>•<br> This dot is perfectly centered. </center> </div>