javascript – Web cover page open when button clicked

Question

hope you’re having a good day!

Bare with me because I’m pretty new to wordpress & elementor 😀 so currently I’m developing a one page website, but I’d like to put one section / screen cover before user can access the website, then click on ‘Open Web’ button to scroll down or open the web, and hide the coverpage.

I’m using Elementor and still developing via website.

Currently this is my code.

CSS:

body{
    overflow: hidden;
}
#coverpage{
    transition: height 2s;
}

#coverpage.shrink {
    height: 0;
} 

Button html:

<input type="button" value="Open Web" onclick="openWeb()">

JS:

 <script>
      function openWeb() {
            
        document.getElementById("coverpage").classList.toggle("shrink");
        document.body.style.overflow = "scroll";
      }
    </script>   

this works just fine, except when the user has already scrolled down to see other sections, then refreshes the page, it doesn’t load back from the cover page. rather than the current view they’re on, and this caused a problem because I set the body to overflow hidden thus user cannot scroll after they reload the page and is stuck on the view.

I tried to use display:hidden, then display:block when button’s clicked, but then the motion effects – entrance animation didn’t work..

any workarounds or suggestion? thank you very much in advanced! 😀

0
kalista lanti 2 months 2021-08-08T01:44:07-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse