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 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>

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

Home CSS Deals HTML HTML5 Java JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress