I have this snippet. The welcome div is for a welcome animation on the page that lasts 3.5 seconds and then disappears.
The problem is that the overflow is visible, being able to see the elements that I would like to be visible only after the welcome animation is finished. As a solution to this problem, I thought of javascript, inserting another function for setTimeOut for body with hidden overflow
setTimeout (function () { document.querySelector ('. body'). style.overflow = 'hidden';
}, 3500);
But it does not work. I want the animation to last x seconds and then all the elements of the page to be visible, not during the animation. Do you have solutions? Is this method as effective for a beginning animation as other modern sites have?
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>Just wrap the content you want to appear after, inside a div or section (say, with an id #mainContent) and initially set its's display to none. When you change the display of .welcome to none, you can also change the display of #mainContent to block like this:
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>