Create Animated Scrolling Presentation Decks Using scrolldeck.js

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 CSS Deals HTML HTML5 Java JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress