1

Hola a todos y de antemano gracias por la ayuda, no tengo muchos conocimientos de css, y estoy intentado conseguir que un div tenga una animación que consista en subir y desaparecer de la ventana y que al ascender arrastre al contenido de la web, en estos dos ejemplos de web se ve el efecto al que me refiero aparece el logo con una animación y tras unos segundos sin que el que visita la web haga nada, asciende para desaparecer y con ello sube el contenido de la web: https://www.adveris.fr/en/ https://www.aquerone.com/

he estado probando con dos div de colore para intentar plantear ese movimiento, espero que me podáis ayudar para saber como se podría realizar.

<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
    
    
<style>
    .animacion{animation-name: subir;
        animation-duration: 2s;
        animation-delay: 5s;}
    
    #cuadro{
        width: 100%;
        height:100vh;
        background-color: red;
        position: relative;
    }
    #cuadrob{
        width: 100%;
        height:100vh;
        background-color: blue;
        position: relative;
    }
    
    @keyframes subir{
        0% {top:0px;}
        100%{top:-800px;}
    }
    
</style>    
    
    
</head>

    
    
    
    
    
<body>
    
    <div id="cuadro" class="animacion"></div>
    
    <div id="cuadrob"class="animacion"></div>

</body>
</html>
2
  • 2
    Lo que quieres hacer no es css ni html, sino javascript. Pero no se preocupe, ya que puede usar jQuery, hay funciones en jQuery que hacen casi exactamente lo que quiere hacer, mover y desvanecer un div. Tendrás que estudiar un poco de javascript y jQuery para hacer esto.
    – res
    Commented el 3 dic. 2021 a las 13:53
  • Mira: jqueryui.com/effect
    – res
    Commented el 3 dic. 2021 a las 13:55

1 respuesta 1

0

Lo que estas buscando es mas conocido como precarga o pre-loader, y te cuento que es posible hacerse sin Javascript, unicamente con CSS, gracias a todas las posibilidades de CSS3 como los @keyframes nos permiten hacer esto.

Te dejo el codigo:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 16px;
  font-family: "Montserrat";
}

body {
  max-height: 100vh;
  overflow: hidden;
}

header h1 {
  font-size: 2rem;
  text-transform: uppercase;
  padding: 1rem;
}

.container {
  width: 100%;
  height: auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.container p {
  width: 50%;
  text-align: justify;
}

.loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: cargar 1s forwards;
  animation-delay: 9s;
  overflow: hidden;
}
.loader p {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 5rem;
}
.loader p span {
  font-size: 5rem;
  letter-spacing: 3px;
  position: relative;
}
.loader p span:nth-child(1) {
  animation: punto1 1s infinite;
}
.loader p span:nth-child(2) {
  animation: punto2 1s infinite;
  animation-delay: 0.3s;
}
.loader p span:nth-child(3) {
  animation: punto3 1s infinite;
  animation-delay: 0.6s;
}

@keyframes cargar {
  0% {
    height: 100%;
  }
  100% {
    height: 0;
    bottom: auto;
  }
}
@keyframes punto1 {
  0% {
    top: 0;
  }
  50% {
    top: -25px;
  }
  100% {
    top: 0;
  }
}
@keyframes punto2 {
  0% {
    top: 0;
  }
  50% {
    top: -25px;
  }
  100% {
    top: 0;
  }
}
@keyframes punto3 {
  0% {
    top: 0;
  }
  50% {
    top: -25px;
  }
  100% {
    top: 0;
  }
}
<header>
  <h1>Logo</h1>
</header>
<div class="container">
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ex, sequi, excepturi quibusdam facilis a architecto omnis cum beatae nostrum sint facere quaerat, eaque dolorem tempora cupiditate veniam. Culpa deleniti dolorum inventore perferendis odit eius ducimus iste rem nisi similique quidem, quae quis adipisci minima tenetur temporibus iure quibusdam pariatur quam!</p>
</div>
<div class="loader">
  <p>cargando<span>.</span><span>.</span><span>.</span></p>
</div>

Eso si ten en cuenta por favor, que si deseas que solo cargue en el Home, o que cargue solamente cuando el contenido de la pagina haya cargado por completo, ahi si necesitaras hacer uso de Javascript o Jquery, poniendo las animaciones dentro de una clase en especifico y agregandoselas o quitandoselas de manera dinamica, como por ejemplo

<body class="width-loader"></body>

Y con el Javascript le quitamos la clase cuando el documento este totalmente cargado, tal que asi:

$(document).ready(function(){
    $("body").removeClass("with-loader");
});

En definitiva puedes hacer un pre-load solamente con CSS, pero si quieres algo mas avanzado te tocara aprender un poco de Javascript

Saludos !

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.