Pace Js when "done" the body scrolls up

Question

I'm using the lovely pace.js as my page loader.

I created a #cover to hide all the content while the loading process complete.

#cover{
position:fixed;
top:0;
left:0;
background:#000;
z-index:99999;
width:100%;
height:100%
}

All I want, when the loading is complete is the cover to scroll up and the content to follow. So the content will slide up from the bottom of the page.

This Javascript makes the cover scrolling up the problem is the second part = the body to follow from the bottom of the page

$(window).load(function() {
    Pace.on('done', function() {
    $("#cover").slideUp(700);
    });
});

This website is what I would like to achieve in terms of loading: http://www.ok-rm.co.uk

Any help? Thanks.

Fed.

Answer 1

I don't understand why you are using position: fixed, just place #cover element the first element of page and add body class wtih overflow: hidden property, and after slideUp() is finished remove class. Hope this helps see: jsfiddle

Edited:

Here is approach with #cover sliding up and content follows: jsfiddle

Answer 2

You can try this approach:

$("body").on("click", function(){
 $(this).toggleClass("slideup")
});

html, body {padding:0; margin:0; height:100%;}

#cover {
  position:fixed; top:0; left:0; z-index:1;
  background:#000; color:#FFF;
  width:100%; height:100%;
  transition:.3s;
}

#body {
  transition:.3s;
  position: relative;
  top:100%;
}

body {overflow:hidden;} /* hide scrollbar by default */
body.slideup {overflow:auto;} /* show scrollbar after loading */
body.slideup #cover {top:-100%;} /* slide #cover up */
body.slideup #body {top:0;} /* slide #body up */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="cover">Loading Content</div>

<div id="body">
  <h1>Hello Universe</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem autem dicta suscipit aliquam aperiam rerum libero id non nulla, voluptatibus, ullam omnis voluptatem ab amet ipsa. Alias deserunt magni tempore.</p>
  <p>Voluptate reiciendis in tempora repudiandae, repellat odit eligendi quis. Obcaecati voluptatem eveniet, maiores, dolore modi officiis nesciunt itaque. Perferendis odit porro aperiam, mollitia repudiandae cupiditate, alias ipsa architecto adipisci magni?</p>
  <p>Soluta minima officia provident beatae similique qui nam in facilis, quibusdam. Pariatur odio qui repellendus tenetur quae aperiam molestias eum exercitationem ipsa veniam, doloribus id temporibus doloremque, sapiente facere, cum.</p>
  <p>Inventore officia corporis cumque, eius id quam cupiditate tempora unde, beatae ipsum optio sint expedita modi atque esse exercitationem assumenda quasi nostrum corrupti obcaecati, culpa ea ipsa. Delectus, eum, repellat.</p>
  <p>Reiciendis debitis doloribus aliquam nesciunt dolorem repellendus. Iste, ducimus. Nostrum necessitatibus soluta, impedit laborum quam eaque accusamus error illo iste reiciendis, veniam facilis repudiandae! Iste, accusantium autem corrupti magnam aut!</p>
</div>

Logic / Explanation:

The basic HTML structure is the following:

body > #cover + #body

where #cover is the loading placeholder and #body is a div which contains all your content. By default, #cover is covering the entire viewport and #body has a top offset. After loading, #cover is moved up by negative top offset and #body slides up by removing the negative offset.

For demonstration sake, I made the effect show on click. The changes rely on CSS transition that change top offset by class toggle instead of JavaScript/jQuery slide function.

In your case, the loading code would be:

$(window).load(function() {
    Pace.on('done', function() {
    $("body").addClass("slideup");
    });
});