¿Cómo puedo lograr un alejamiento a otro efecto de transición de imagen?

Estoy buscando hacer una transición de imágenes con alejar a la segunda imagen, tercera imagen, etc. Intenté hacerlo yo mismo con algunos fotogramas clave a través de la imagen de fondo y la escala, y funcionó decentemente, excepto que hubo 2 problemas. 1. Mi texto y botones también fueron escalados, 2. la duración de las imágenes fue demasiado corta. Lo incluiría pero lo he eliminado ya que no era lo que estaba buscando. No estoy seguro de si hay alguna manera de que esto sea factible con CSS puro, al menos no fácilmente. ¿Entonces me inclino hacia voy a tener que usar JS? Aquí está mi código actual.

.jumbo {
  display: flex;
  flex-direction: column;
  justify-content: Center;
  margin: 0;
  width: 100vw;
  height: 100vh;
  min-height:100vh;
  background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.3)),
    url("images/j-img1.png");
  background-repeat:no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.jumbo-text {
  text-align: center;
  color: white;
  font-weight: 600;
}

/* Jumbo button */
.vmore-button {
  text-align: center;
  border: 2px solid white;
  text-transform: uppercase;
  padding: 16px;
  align-self: Center;
  margin: 20px;
  border-radius: 5px;
  font-weight: 600;
  font-size: 24px;
  transition: 0.5s ease;
  color: white;
  max-height: 70px;
  cursor:pointer;
}

    <div class="jumbo">
      <h2 class="jumbo-text">
        Welcome to LLG
      </h2>
      <h3 class="jumbo-text animated slideInLeft delay-1s" style="color:#e8e8e8; font-weight:500;">
        Memorable Gaming Experience, High Quality Servers.
      </h3>
      <a class="vmore-button hvr-icon-pulse-shrink" href="#viewmore">View more<br><i class="fas fa-arrow-circle-down hvr-icon"></i></a>
    </div>

Expandir fragmento

html css Tim
fuente

Creo que fue mejor si proporcionaste el código que intentaste, no puedo ver de qué hablas ... o puede que mi inglés no sea bueno

Ayman Morsy

Tengo curiosidad sobre el +8 en esta pregunta poco clara donde no hay código relacionado con ninguna animación

Temani Afif

Respuestas:

Necesitarás un contenedor div y dos divisores secundarios. El primer niño debe manejar las imágenes con zoom / transición, el segundo niño debe contener su texto. Tanto las imágenes como los separadores de texto deben colocarse en posición absoluta para que estén uno encima del otro. Puede cambiar qué intervalo / imagen están activos / visibles aplicando una clase específica al contenedor principal.

<div class="container">
  <div class="images">
    <img>
    <img>
    <img>
  </div>
  <div class="text">
    <span>TextA</span>
    <span>TextB</span>
    <span>TextC</span>
  </div>
</div>

Tom Shaw
fuente

Gracias, creo que este será un buen punto de partida para lo que estoy tratando de lograr.

Tim

Solo unas pocas preguntas más. ¿Debería aplicar absoluto tanto en imágenes como en texto? Estaba jugando con eso e hice eso, y aparece texto sobre las imágenes. Pero las imágenes todavía están en el flujo normal de documentos. No es hasta que pongo absoluto en las imágenes reales y cuando lo hago, las lee de abajo hacia arriba. Y voy a tener que usar JS para aplicar las clases visibles ¿verdad?

Tim

Esa es una excelente pregunta. Las imágenes se pueden diseñar con un estilo absoluto y puede hacer un efecto de disolución de opacidad o se pueden mostrar en bloque en línea donde las imágenes se deslizan desde los lados, o mostrar bloques y animaciones usando translateY girando de abajo hacia arriba. Mira esto youtu.be/tkXUzVNl6Rw?t=68

Tom Shaw

Suena bien. ¿Pero tienes alguna idea de por qué muestra las imágenes de la última a la primera?

Tim

No sé si esto es lo que quieres decir o no de tu solicitud

.jumbo {
  display: flex;
  flex-direction: column;
  justify-content: Center;
  margin: 0;
  width: 100vw;
  height: 100vh;
  min-height:100vh;
  background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.3)),
    url("https://img.freepik.com/free-vector/abstract-colorful-flow-shapes-background_23-2148258092.jpg");
  background-repeat:no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.jumbo-text {
  text-align: center;
  color: white;
  font-weight: 600;
}

/* Jumbo button */
.vmore-button {
  text-align: center;
  border: 2px solid white;
  text-transform: uppercase;
  padding: 16px;
  align-self: Center;
  margin: 20px;
  border-radius: 5px;
  font-weight: 600;
  font-size: 24px;
  transition: 0.5s ease;
  color: white;
  max-height: 70px;
  cursor:pointer;
}
@media only screen and (max-width: 600px) {
  .jumbo {
    background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.3)),
    url("https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg");
  }
}

<div class="jumbo">
  <h2 class="jumbo-text">
    Welcome to LLG
  </h2>
  <h3 class="jumbo-text animated slideInLeft delay-1s" style="color:#e8e8e8; font-weight:500;">
    Memorable Gaming Experience, High Quality Servers.
  </h3>
  <a class="vmore-button hvr-icon-pulse-shrink" href="#viewmore">View more<br><i class="fas fa-arrow-circle-down hvr-icon"></i></a>
</div>

Expandir fragmento

Se coloca una imagen cuando el ancho es 600 y menos. Puedes probarlo

Hesham Mohamed
fuente