2

Tengo el siguiente código, la función es hacer una animación cambiando el contenido de un texto de manera de que no se vea tan busco el cambio del texto:

* {
  padding: 0;
  margin: 0;
}

ul,
ol {
  list-style: none;
}

ul#gio {
  position: relative;
  width: auto;
  height: 29px;
  overflow: hidden;
  font-size: 25px;
}

ul#gio li {
  height: 58px;
  display: block;
  position: absolute;
  font-family: Arial;
  animation-duration: 3s;
  animation-name: anim;
  animation-iteration-count: infinite;
  top: 29px;
}

ul#gio li:nth-child(2) {
  animation-delay: 2s;
}

ul#gio li:nth-child(3) {
  animation-delay: 4s;
}

@keyframes anim {
  0% {
    top: 29px;
  }

  30% {
    top: 0;
  }

  90% {
    top: -29px;
  }

  100% {
    top: -29px;
  }
}
<html>
  <head>
    <title>prube</title>
    <link rel="stylesheet" href="i.css">
  </head>
  <body>
    <h2 id="subtitle">
      <span id="coin">Pueba&nbsp;</span> 
      <ul id="gio">
        <li>
          Facil
        </li>
        <li>
          Rapido
        </li>
        <li>
          Sencillo
        </li>
      </ul>
    </h2>
  </body>
</html>

Con esto logro la animación que esperaba, hasta ahí todo bien. Pero el problema que tengo es que la Lista ul se me coloca por de bajo del <span>prueba</span>, pero necesito que el span y ul estén uno al lado del otro y uno de bajo del otro. Y tanto el span como la lista estén centrados, pero no se como hacerlo.

1
  • Ayudaría que agregues una imagen de cómo quieres que se vea.
    – Mateo
    el 13 jun. a las 14:48

1 respuesta 1

1

he creado esto en base a lo que he entendido, no sé si es exactamente lo que estabas buscando pero espero que te ayude :)

Para centrar el texto, puedes aplicar la propiedad 'position: absolute;' a tu etiqueta 'h2', ya que es el elemento que contiene el 'span' y el 'ul'. Al hacer esto, podrás utilizar las propiedades 'left' y 'top' para ajustar la posición de 'h2' y lograr el centrado deseado.

Por lo general, se considera que el 50% es una posición centrada. Sin embargo, debes tener en cuenta que este centrado se realiza con respecto a la esquina superior izquierda del contenedor. Por lo tanto, en el código, he agregado left: 47vw; (donde vw representa el Viewport Width) para centrar horizontalmente y top: 48vh; (donde vh representa el viewport height) para centrar verticalmente el 'h2'.

Una vez que el texto esté centrado, el siguiente paso es hacer que los elementos se muestren uno al lado del otro en lugar de en forma de columna. Para lograr esto, puedes utilizar Flexbox. Es importante aplicar Flexbox al elemento padre que contiene los elementos que deseas alinear en fila, de lo contrario no funcionará.

En el 'h2' (El cual es el elemento padre), he agregado display: flex; para indicar que utilizaremos Flexbox. Con flex-direction: row;, indicamos que todos los elementos hijos de 'h2' se posicionarán en filas.

Finalmente, se realizaron algunos ajustes en las animaciones. Se cambió el position: absolute; de los elementos li a position: relative; De esta forma css nos permite utilizar la propiedad 'top'

Se eliminó el retraso (delay) en las animaciones de ul#gio li:nth-child(2) y ul#gio li:nth-child(3) porque causaban que la animación no se mostrara correctamente al iniciar o recargar la página. En su lugar, se agregó top: 0; al inicio de la animación para que la palabra "fácil" se muestre inmediatamente al cargar o recargar. Luego, considerando que cada texto tiene una altura de 29px, se mueven hacia arriba en incrementos de -29px en cada parte de la animación. Esto funciona bien en la primera ejecución, pero se nota claramente el cambio al reiniciarse la animación. Para solucionarlo, se agregó un nuevo elemento al final de la lista con el mismo contenido que el primer elemento de la lista. Esto hace que, al reiniciar la animación, pase desapercibido y se logre una transición suave.

* {
  padding: 0;
  margin: 0;
}

ul,
ol {
  list-style: none;
}

h2 { 
  position: absolute; /*Para poder alinearlo al centro de la pantalla con left y top*/
  left: 47vw; /*Como el punto de referencia que se utiliza para centrar un elemento es la ezquina superior izquierda del elemento a mover
  lo he movido un poco menos que el 50% del Viewport Width (ancho del dispositivo)*/

  top: 48vh; /*Lo mismo pero ahora con el height*/

  display: flex; /*De esta forma podemos ordenar los elementos que se encuentran en el interior de la etiqueta h2*/
  flex-direction: row; /*Los elementos dentro de h2 se ubicaran en fila generando que span y ul estén uno al lado del otro*/
  width: auto;
}

ul#gio {
  width: auto;
  height: 29px;
  overflow: hidden;
  font-size: 25px;
  transform: translateX(1rem);
}

ul#gio li {
  height: 29px;
  display: block;
  position: relative; /* Posición relativa*/
  font-family: Arial;
  animation-duration: 3s;
  animation-name: anim;
  animation-iteration-count: infinite;
  top: 29px;
}

/* Cambié las animaciones, de esta forma si quieres editar la duración de tu animación no debes 
coordinar los animation delay de cada elemento de la lista*/

@keyframes anim {

  0%{
    top: 0px;
  }
  33%{
    top: -29px;
  }

  66%{
    top: -58px;
  }

  100%{
    top: -87px; /*Para que el reinicio de la animación no se note he agregado nuevamente el elemento inicial "facil" a tu lista,
    de esta forma 'facil' es el último en tomar la posición del texto y coincide con el reinicio de la animacion para ocultar su cambio*/
  }

}
<html>
  <head>
    <title>prube</title>
    <link rel="stylesheet" href="i.css">
  </head>
  <body>
    <h2 id="subtitle">
      <span id="coin">Pueba&nbsp;</span> 
      <ul id="gio">
        <li>
          Facil
        </li>
        <li>
          Rapido
        </li>
        <li>
          Sencillo
        </li>
        <li>
          Facil
        </li>
      </ul>
    </h2>
  </body>
</html>

4
  • En Stack Overflow en español no existen los likes, sino los votos a favor y en contra :) Para no meter ruido a tu respuesta, podés dejar un comentario en esta misma respuesta: como los comentarios son efímeros, más adelante podés eliminarlo (o lo eliminarán, lo que se dé primero).
    – padaleiana
    el 13 jun. a las 18:53
  • Hola Cristian, gracias por tu colaboración, las respuestas que son solo código, son consideradas de baja calidad, te sugiero que edites la tuya, y expliques de que forma resuelve el problema planteado, así evitarás que sea cerrada y/o recibir votos negativos. el 13 jun. a las 19:53
  • ¿Está bien así o debo realizar alguna edición?, de antemano muchas gracias por enseñarme a mejorar mis respuestas el 13 jun. a las 22:27
  • gracias, me ayudaste mucho. el 14 jun. a las 23:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.