CODEWITHSUNDEEP
jqueryhtmlcssanimation
Rywi
Rywi

Reputation: 143

Hide scrollbar during splash animation

So I have a site where I created a splash screen. It's quite a simple code

<div style="position:absolute; top:0; left:0; width:100%; height:100%;"> Something<div>

It has additional style for animation, so it would appear and then slide to the top after people see it:

-webkit-animation-name: splash;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 5s;
}
@-webkit-keyframes splash
{
0%
{
    bottom:0;
}
33%
{
bottom:0;
}
100%
{
    bottom:100%;
}

And what I want to do, is make the scrollbar disappear from the webpage during the animation. I'm no good at javascript, so first I'm asking is there a way to do it in CSS? If there isn't could anyone help me with a script that would put overflow: hidden; in my html tag and remove it after the animations?
Thanks a million!

Upvotes: 0

Views: 1679

Answers (1)

Kevin Pei
Kevin Pei

Reputation: 5872

Try adding this css:

body, html{
    overflow:hidden;
}

and this JS:

$(function(){
    setTimeout(function(){$('html,body').css('overflow','auto');}, 5000);
});

Also, just as a note your current code would not animate. You have not assigned the animation to the div

Upvotes: 1

Related Questions