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>