Tengo este fragmento. El div de bienvenida es para una animación de bienvenida en la página que dura 3,5 segundos y luego desaparece.
El problema es que se ve el desbordamiento, pudiendo ver los elementos que me gustaría que fueran visibles solo después de terminar la animación de bienvenida. Como solución a este problema, pensé en javascript, insertando otra función para setTimeOut para el cuerpo con desbordamiento oculto
setTimeout (función () { documento.querySelector ('. cuerpo'). estilo.desbordamiento = 'oculto';
}, 3500);
Pero no funciona. Quiero que la animación dure x segundos y luego todos los elementos de la página sean visibles, no durante la animación. ¿Tienes soluciones? ¿Es este método tan efectivo para una animación inicial como lo tienen otros sitios modernos?
setTimeout(function() { document.querySelector('.welcome').style.display ='none' ; },3500) ; *{ margin:0; padding:0; box-sizing:border-box; } .welcome{ background:black; height:100vh; display:flex; align-items:center; justify-content:center; } <div class = "welcome"> </div> <div class = "header"> <div class = "developedbar"> <h2 class ="developed1">Developed</h2> <h2 class ="developed2">Developed</h2> </div>Simplemente envuelva el contenido que desea que aparezca después, dentro de un div o sección (por ejemplo, con una identificación #mainContent ) e inicialmente establezca su visualización en none . Cuando cambia la visualización de .welcome a none , también puede cambiar la visualización de #mainContent para block así:
setTimeout(function() { document.querySelector('.welcome').style.display ='none'; document.querySelector('#mainContent').style.display ='block' ; },3500) ; *{ margin:0; padding:0; box-sizing:border-box; } .welcome{ background:black; height:50vh; display:flex; align-items:center; justify-content:center; color: #FFF; } #mainContent {display: none;} <div class="welcome"> <h1>Welcome</h1> </div> <div id="mainContent"> <div class="header"> <div class= "developedbar"> <h2 class="developed1">Header</h2> </div> </div> <div class="body"> <p>Body content and other text here</p> <p>Body content and other text here</p> <p>Body content and other text here</p> <p>Body content and other text here</p> </div> <div class="footer"> <h2 class="developed1">Footer</h2> </div> </div>