0

Estoy practicando a hacer un landingpage en el que quiero que aparezca texto tras unos segundos, y posteriormente, hacer un slideUp del div para mostrar la pagina principal. He estado intentando crear promesas y utilizar await pero no se trabajar con esto y funciones. Solo veo ejemplos que devuelven mensajes por consola.

Me gustaría poder ver un ejemplo con async await por poder utilizarlo en futuros proyectos y saber como funcionan las promesas con funciones.

Con 2 setTimeout para cada animación no hay problema, sencillo. La cuestión es poder ver en un ejemplo con async await y promesas, ya que no lo consigo encontrar.

El siguiente codigo funciona perfectamente, pero como digo no es la idea:

$(document).ready( function(){
    setTimeout(()=>{$(".descriptions").css('opacity', '1');},1000);
    setTimeout(()=>{$(".landing").slideUp("slow");},3000);
});

Les dejo el snippet completo:

$(document).ready( function(){

//primero quiero cargar estas letras tras 1 segundo 

$(".descriptions").css('opacity', '1');
 
//posteriormente hacer el slide

$(".landing").slideUp("slow");

});

$(document).ready( function(){
    $(".descriptions").css('opacity', '1');

    $(".landing").slideUp("slow");
    
  });
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@200&display=swap');
@import url("/node_modules/bootstrap-icons/font/bootstrap-icons.css");
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 32px;
}
html{
    width: 100vw;
    height: 100vh;
}

body{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.landing{
    
    position: fixed;
    display: flex;
    width: 100%;
    height: 100%;
    background-color:blue;
    background-size: cover;
    z-index: 10;
    transform: translateY(0);

}
.landing h1{
    width:50%;
}
.personal{
   font-size: 0.9em;
}
.portfolio{
    font-size: 0.7em;
}
.title{
    padding: 40px;
    position: relative;
    height: auto;
    width: auto;
    font-size: 8vw;
    font-family: 'Lobster', cursive; 
    color:rgb(255, 255, 255);

}

section{
    
    height: 100%;
    width: 40%;
    display: flex;
    align-items: flex-end;

}
.descriptions{

    width: 100%;
    height: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: end;
    opacity: 0;
    transition: 3s ease-out;
    
}

.description{
    
    text-align: center;
    margin-right: 20px;
    width: 80%;
    font-size: 5vw;
    color:#ffffff;
    font-family: 'Heebo', sans-serif;
   
}
main{
    width: 100%;
    height: 100%;
    background-color:black;
    background-size: cover;
}
.home{
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    
}

.navigation{
    display: flex;
    justify-content: center;
    margin-top:10px ;
    height: 15vh;
    width: 500px;
    min-width: 250px ;
    
    
}
#nav{
    
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background:
    linear-gradient(to right, #F5530B 0%, 13.858695328235626%, #FD7C06 27.717390656471252%, 63.858695328235626%, #E5970C 100%);
    border-radius: 50px;
}
#nav ul{
   
    display: flex;
    flex-direction: row;
    justify-content: center;
    column-gap:40px ;
    width: 100%;
   
}
li{
   
    list-style: none;
    
}
i,a{
     display: flex;
     flex-direction: column;
     align-items: center;
    color: white;
    text-decoration: none;
    font-size:0.8em;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/styles/Landingstyle.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>



</head>

<body>

  <main>
    <div class="home">
      <h1 class="title">¿Quieres <br> conocerme <br> mejor?</h1>
      <div class="navigation">
        <nav id="nav">
          <ul>
            <li><a href="http://"><i class="bi bi-file-person-fill">About</i></a></li>
            <li><a href="http://"><i class="bi bi-envelope-fill">Contact</i></a></li>
            <li><a href="http://"><i class="bi bi-file-spreadsheet-fill">Proyects</i></a></li>
          </ul>
        </nav>
      </div>
    </div>
  </main>


  <div class="landing">
    <h1 class="title">This is my <br><span class="personal">personal</span><br> <span class="portfolio">Portfolio</span> </h1>
    <section class="section">
      <div class="descriptions">
        <h2 class="description">Choosing has never</h2>
        <h2 class="description"> been so easy</h2>
      </div>
    </section>
  </div>

<script src="javascript.js/intro.js"></script>
</body>

</html>

1 respuesta 1

0

De la forma que lo has hecho funciona, solo tiene sentido usar async await si tienes algo a lo que esperar, tipo: solicitud al servidor x y esperar respuesta, no sé lo que tarda, por tanto tiene sentido indicar un await. Pero esperar un tiempo específico para eso sirve settimeout, es perfecto, en cualquier caso este sería un ejemplo con async/await de lo mismo, aunque como digo no lo haría, usaría el timeout que has hecho.

$(document).ready( function(){
    landing();
  descriptions();
});

async function landing(){
    const res = await wait(3000);
    $(".landing").slideUp("slow");
}
async function descriptions(){
    const res = await wait(1000);
    $(".descriptions").css('opacity', '1');
}

async function wait(time) {
  return new Promise((resolve, reject) => {
       setTimeout(() => resolve("ok"), time);
  })
}
3
  • SI, se que funciona correctamente. Lo que buscaba es ver un ejemplo con funciones porque no consigo encontrarlo para ver bien como funcionan las promesas y async await. Creo que con este ejemplo me hago mejor idea. Tenia la idea de que una promesa devolvía una función en sí, pero veo que no, que hace una función, y si se realiza correctamente devuelve un mensaje mediante resolve y en caso contrario con rejected. Muchas gracias
    – Jose L.
    Commented el 21 ene. 2023 a las 17:17
  • Cuando usas funciones async no necesitas usar dentro new Promise(...). Toda función async devuelve una Promesa. Saludos Commented el 21 ene. 2023 a las 17:32
  • Correcto Mauricio, no es necesario devolver una Promesa porque al indicar async ya es promesa, peeero, ¿como resuelvo esa promesa si no uso un resolve? Commented el 21 ene. 2023 a las 17:38

Tu Respuesta

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

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