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/

Home XML WordPress Web Services Web Development Web Design Underscore Uncategorized Tutorial Tools SQL Server Social Apps Snippet SEO Security RoR Responsive Design Resources Python PHP News MySQL Mobile Miscellaneous jQuery JavaScript Java J2EE HTML5 HTML Design Patterns