The scrolldeck.js library is probably one of the best ways out there to implement a scrolling presentation deck. All you have to do is build a web page with each slide as a div. It requires JQuery, Scrollorama, scrollTo, easing & scrolldeck JS scripts to function. After linking all of the above scripts, create the slide deck on the document ready event and configure the settings as shown:
$(document).ready(function() {
var deck = new $.scrolldeck({
buttons: '.nav-button',
slides: '.slide',
duration: 600,
easing: 'easeInOutExpo',
offset: 0
});
});From here, all you have to do is add the animate classes to your slides elements as shown:
<div class="slide">
<p class="animate-in" data-animation="fly-in-left">This paragraph will fly in from the left.</p>
<p class="animate-in" data-animation="fly-in-right">This paragraph will fly in from the right.</p>
</div>
<div class="slide">
<p>This slide is ’pinned‘ to the top of the screen until all the slide animation builds are complete.</p>
<p class="animate-build" data-build="1">This is the default fade in animation)</p>
<p class="animate-build" data-animation="space-in" data-build="2"> This paragraph will fade in while its letter spacing contracts to normal. </p>
</div>You can hide the scrollbar by setting the following in your CSS
html { overflow:hidden; }Remember to download and reference all the appropriate JS scripts from the header section.
A demo of scrolldeck.js in action can be seen at http://johnpolacek.github.com/scrolldeck.js/decks/responsive/
