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.

score 2 · Answer 1 · answered Feb 25 '16 at 11:36

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");
    });
});

Thank you @Aziz, this is almost working, just the cover is disappearing without scrolling up, I'll try t fix that. — Federico, Feb 25 '16 at 12:17
Did you add `transition:.3s;` to it? Also make sure to add any vendor prefixes, if needed. — Aziz, Feb 25 '16 at 12:19
That's strange, would appreciate a live demo to debug it properly and find what's causing this. — Aziz, Feb 25 '16 at 12:27
I tried both solution but they do not work properly on my website, maybe cause I have too many elements with different positionings. I kept the fade out solution by now :) Thanks so much, BTW. Fed. — Federico, Feb 28 '16 at 12:22
@FedericoFerrari I wouldn't mind troubleshooting this with you, come to chat http://chat.stackoverflow.com/rooms/104752/azizs-room — Aziz, Feb 28 '16 at 12:25

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 25 '16 at 11:31

jjanko3

124
1
13

Interesting, not sure if OP wants the #cover to shrink in height or to actually MOVE upside off the screen.. – Aziz Feb 25 '16 at 11:38
Thanks @jjanko3 I tried but this solution isn't working. The body already has a class .pace-running (when the loader is running, obviously) and a class .pace-done (when it reaches 100%) if that's help. – Federico Feb 25 '16 at 11:43
@Aziz I actually want to cover to move up, off the screen, that's right. If you see the example website you understand perfectly. – Federico Feb 25 '16 at 11:43

Pace Js when "done" the body scrolls up

2 Answers2

Edited: