How do I keep scrollr.js from scrolling for a specific amount of time?

Question

Situation: I'm using skrollr.js for a home page, and in that I'm using 3d transformations to simulate scrolling by translating the .panel divs into the viewport instead of the viewport moving to the fixed divs. I'm not using a helper class to enable the scrolling either.

JSFiddle: http://jsfiddle.net/5c9tgj4y/13/

<div id="panel-2" class="panel" data-0="transform:translate3d(0%,100%,0)" data-200p="transform:translate3d(0%,0%,0)"></div>

Current Behavior: The user has the ability to scroll the second panel up over the first directly after the page is loaded.

Wanted Behavior: I would like a delay on the second panel's transition translation, making the user unable to scroll until a certain amount of time has passed.

It is best if you imagine the first panel as a slideshow, and we want the user to wait until after the slideshow is finished to begin scrolling.

At this point I'm not going to be picky about how you solve this problem. However you know how, show me.

Answer 1

How about a very basic timeout?

window.setTimeout(function() {
    var s = skrollr.init();
}, 2000); /* Wait 2000 ms before initializing the skrollr plugin */