Question

0

218

Vistas

Posición central de una animación CSS Jugando con rotación (45 grados)

Tengo el siguiente código:

 #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>

Por mi parte, la salida se ve así:

Esto es exactamente lo que quiero ya que el botón de desplazamiento hacia abajo está alineado justo encima del texto y lo logré configurando a la left: calc(52.3% - 1em) !important; . Por mi parte, esta propiedad es lo que hace que se alinee perfectamente sobre el texto.

El problema es que cuando me alejo, obtengo este resultado:

Como puede ver, la alineación del botón de desplazamiento cambia y se mueve hacia la derecha, y es por la left: calc(52.3% - 1em) !important; propiedad estoy bastante seguro. Pero no quiero cambiar o eliminar esta propiedad ya que esto es lo que hace que se alinee perfectamente con el 100% zoom . ¿Hay alguna manera de arreglar esto? Por ejemplo, cuando alejo el zoom en el sitio web, la alineación del botón de desplazamiento no cambia y permanece constante. ¿Alguna sugerencia?

about 4 years ago · Juan Pablo Isaza

3 Respuestas

Responde la pregunta

0

En el CSS simplemente agregue esta propiedad a la posición #containerScroll :

 fixed; left: 50%; top: 90%; transform: translate(-50%, -50%);

about 4 years ago · Juan Pablo Isaza Denunciar

0

Sin un fragmento completo que permita recrear completamente su problema, solo puedo intentar recrearlo usando el código que tiene.

Puede colocar juntos los elementos my-story y containerScroll dentro del título de la sección . Luego haga que la posición containerScroll cambie la pantalla a flex . Haga que su posición superior sea 0 y declare el ancho 100% y la altura 10em o lo que desee que sea su altura, solo asegúrese de que el elemento my-story tenga el mismo margen superior establecido en su css que su altura del containerScroll .

He probado esto y cuando hago ZOOM hacia adentro o hacia afuera usando CNTL + RUEDA DEL RATÓN no hay desplazamiento de los dos elementos entre sí.

 * { margin: 0; padding: 0; box-sizing: border-box; } html { --top-dis: 10em; /* use variable so only change once in dynamic locations */ } body { height: 2000px; } section { padding: 60px 0; overflow: hidden; } #containerScroll { position: absolute; display: flex; top: 0%; background-color: #ddd; width: 100%; height: var(--top-dis); } .section-title { text-align: center; padding-bottom: 30px; margin-top: var(--top-dis); } .section-title h2 { font-size: 32px; font-weight: bold; text-transform: uppercase; margin-bottom: 20px; padding-bottom: 20px; position: relative; color: #45505b; } .section-title h2::before { content: ''; position: absolute; display: block; width: 120px; height: 1px; background: #ddd; bottom: 1px; left: calc(50% - 60px); } .section-title h2::after { content: ''; position: absolute; display: block; width: 40px; height: 3px; background: #0563bb; bottom: 0; left: calc(50% - 20px); } .first-scroll { left: calc(50% - 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(50% - 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 class="section-title"> <h2>My Story</h2> <div id="containerScroll"> <scroll class="first-scroll"></scroll> <scroll class="second-scroll"></scroll> </div> </div>

about 4 years ago · Juan Pablo Isaza Denunciar

Responde la pregunta

Encuentra empleos remotos

Accepted Answer · 2022-07-05T15:09:16.132Z

¡Esa es una animación realmente genial!

Para centrarlo perfectamente, hice los siguientes cambios:

Esto estaba siendo usado para centrar el div, left: calc(52.3% - 1em) !important; ; Lo eliminé por completo y usé una etiqueta <center> simple para centrarlo.
El código de animación en sí se ejecuta directamente a la derecha del centro (que está descentrado). Puede solucionar esto moviendo un elemento a la izquierda de sí mismo en un 50% de su propio ancho con translateX(-50%) .
Por supuesto, en realidad no puedes usar 50% porque un cuadro cuadrado, girado de lado, aumenta su ancho en un factor de aproximadamente 45% , lo que significa que necesitamos traducir Y no en un 50% , sino en un 66% .

 #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>&bull;<br> This dot is perfectly centered. </center> </div>

0

218

Posición central de una animación CSS Jugando con rotación (45 grados)

3 Respuestas

0

0

0

Encuentra empleos remotos

Andres GPT